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

Hide react component by clicking it

Headers and data organization in Angular 2

I attempted to retrieve the id field of a jsonwebtoken following the user's login, but unfortunately, I was unable to access it

Send a POST request with an NSDictionary set in the HTTPBody

Example of Using Bluebird in a Chain of Catch and Then Functions

Angular 2 - Beginner's guide to updating the header when navigating to a new route or page

Steps to avoid reinitializing the component upon changing routes in an Angular 9 component

Mapping fields in Angular collectively

Ways to Access HTTP Request Headers in Angular 6 upon Page Load

Is it better to use a single struct or multiple structs for handling nested JSON

Guide to building an Angular circular progress indicator using Scalable Vector Graphics (SVG)

Angular project set up with dynamic polyfill inclusion based on .browserslistrc configuration

What are the steps to create a JSON file structured in a tree format?

Typescript patterns for creating a modular library design

Utilizing Vue and Typescript for efficient dependency injection

Look for and choose various fields from a lengthy JSON object

Send an encrypted POST request containing a JSON body to the R server

Creating a new object in a Redux selector and returning it can be achieved by following these steps

What is the solution to the tkinter TypeError: keys must be str, int, float, bool or None, not Button error?

Can TypeScript modules be designed to function in this way?