Is there a way to dynamically retrieve a JSON element in Typescript?

Question

Is there a way to dynamically retrieve a JSON element in Typescript?

I am using a data grid throughout my application, and currently, I am retrieving the selected rowid with the following code.

Here is the HTML snippet:

<tbody>
   <tr *ngFor="let ddata of tableData.data; let i = index" (click)="setClickedRow(ddata)" [class.active]="ddata.discountauthorizationid == selectedRow">
      <td *ngFor="let dr of tableData.record | paginate: { itemsPerPage: pageItem, currentPage: p }">{{ddata[dr]}}</td>
   </tr>
</tbody>

In the component.ts file, I handle this as follows:

this.selectedRow = ddata.discountauthorizationid;

console.log("You selected!",ddata.discountauthorizationid);
this.dataService.changeMessage(ddata.discountauthorizationid);

Now, I aim to make this process entirely dynamic by defining the primary id like this:

@Input() primaryid: string

I would like to access data.(some_primaryid) in a way that resembles accessing an array using keys. Can this be achieved? If so, could you provide guidance on how to do it?

json angular typescript

Answer 1

Answer №1

Learn how to retrieve the value below.

let myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.primaryId = "userId";
    
    $scope.data = {
       "userId": 1,
       "accountId": 23,
       "testId": 5
    };

  
$scope.changeId = ()=>{
    
   $scope.primaryId = "accountId";
};
}

<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="myApp">
<div ng-controller="MyCtrl">
   {{primaryId}} is :  {{data[primaryId]}}!
 <button ng-click="changeId()">
  Change ID
 </button>
</div>
</body>
</html>

Answer 2

Learn how to retrieve the value below.

let myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.primaryId = "userId";
    
    $scope.data = {
       "userId": 1,
       "accountId": 23,
       "testId": 5
    };

  
$scope.changeId = ()=>{
    
   $scope.primaryId = "accountId";
};
}

<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="myApp">
<div ng-controller="MyCtrl">
   {{primaryId}} is :  {{data[primaryId]}}!
 <button ng-click="changeId()">
  Change ID
 </button>
</div>
</body>
</html>

Answer 3

Answer №2

After numerous attempts, I finally found a solution. The code now reads as follows: ddata[primary_id_var]. Using ddata[{{primary_id_var}}] did not yield the desired outcome.

Answer 4

After numerous attempts, I finally found a solution. The code now reads as follows: ddata[primary_id_var]. Using ddata[{{primary_id_var}}] did not yield the desired outcome.

Answer 5

Answer №3

Latest Information, as per your feedback:

class Info {
    public identifier: string;
}

let key = 'identifier'; // key will be the input provided
let infoData = <Info>{ identifier: '456' };

alert(infoData[key]); // 456

Prior Response: I may not have fully understood your query, but based on your previous statement:

I want to retrieve this data (some_identifier) similar to how we access elements in an array using a key and assign the key with a variable. Is this achievable? If so, how?

Absolutely, it can be done. You can access properties in this manner:

console.log(data['some_identifier']);
data['some_identifier'] = '789';

Answer 6

Latest Information, as per your feedback:

class Info {
    public identifier: string;
}

let key = 'identifier'; // key will be the input provided
let infoData = <Info>{ identifier: '456' };

alert(infoData[key]); // 456

Prior Response: I may not have fully understood your query, but based on your previous statement:

I want to retrieve this data (some_identifier) similar to how we access elements in an array using a key and assign the key with a variable. Is this achievable? If so, how?

Absolutely, it can be done. You can access properties in this manner:

console.log(data['some_identifier']);
data['some_identifier'] = '789';

Is there a way to dynamically retrieve a JSON element in Typescript?

Answer №1

Answer №2

Answer №3

Similar questions

What strategies can I implement to reduce the size of my Angular application to 500K or less?

When I attempted to POST a js::array in JSON, the response returned "undefined:undefined"

Allow users to create an unlimited number of components by simply clicking on Ionic with a customizable click event

Optimize performance: sending large arrays of numbers ([Double]) over HTTP using Swift

Troubleshooting the error message "Encountering issues with Module build failed (from ./node_modules/postcss-loader/src/index.js)"

The error message "tsc not found after docker image build" appeared on the

Using ngFor to destructure two variables simultaneously

Understanding the complexity of defining the type of a function can be challenging. If you're tasked with a complicated function, determining its type

Generating a multidimensional associative array based on user inputs from a form

Suggestions for displaying combination data in JSON format?

Retrieving XML Information from a Textual Source

What methods can I use to gauge the loading time of an AJAX request and showcase a loading panel?

Table pagination in Mat is experiencing overflow, and the button styles have also been customized for a unique look

Newest Angular package.json

Using TypeScript to Declare Third Party Modules in Quasar

Angular first renders a component before removing another one using ng-If

What is the best way to transfer user data from the backend to the frontend?

The Google Books API has encountered an authentication error with status code 401

Learn the process of dynamically loading scripts and their functions in Angular

Updates made in the type declaration files are not being displayed