How can I access this JSON element dynamically in Typescript?

Question

I have a data grid which is getting used across the application. I am getting currently selected rowid using the below code.

In HTML:

<tbody>
   <tr *ngFor="let ddata of tableData.data; let i = ddata" (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>

And in component.ts file I am doing this:

this.selectedRow = ddata.discountauthorizationid;

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

Now I want to make this access completely dynamic and I have the primary id defined like this

@Input() primaryid: string

I want to access this data.(some_primaryid) just like we access the array using key and assign key using variable. Is it possible? If so how?

could you show us your data? how could we tell if data.(some_primaryid) would work on your data or not without any example. Your question is incomplete, give us some sample data and show us what type of result you want. — Hey24sheep
– Hey24sheep, Commented Jan 23, 2018 at 13:35
Sorry for lack of clarity but I have situation where the name of the element will differ with every the module. so it would be like discountid or accountid or userid and So on. I have already a variable called primaryid which is holding the name of the primaryid. so if I want to access data.accountid , instead of hard coding I want to use data.[primaryid] or something. — Talk is Cheap Show me Code
– Talk is Cheap Show me Code, Commented Jan 23, 2018 at 13:41

Hey24sheep · Accepted Answer · 2018-01-23 13:47:53Z

1

Here is how you can access the value.

var 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>

answered Jan 23, 2018 at 13:47

Hey24sheep

1,2127 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Talk is Cheap Show me Code Over a year ago

Perfect one. I was looking like this. was Just testing it. Thanks for the confirming my solution. Your answer is precise clear and true :-)

Hey24sheep Over a year ago

I have added a button as well for you to show how to access it dynamically

Talk is Cheap Show me Code · Accepted Answer · 2018-01-23 13:49:23Z

0

After trying many things. I am able to do it like this. ddata[primary_id_var]. I tried ddata[{{primary_id_var}}] but it didn't worked.

answered Jan 23, 2018 at 13:49

Talk is Cheap Show me Code

2,3249 gold badges29 silver badges55 bronze badges

Comments

Benjamin Schäublin · Accepted Answer · 2018-01-23 13:52:39Z

0

Update, according to your comment:

class Data {
    public some_primary_id: string;
}

let id = 'some_primary_id'; // id would be your input parameter
let data = <Data>{ some_primary_id: '123' };

alert(data[id]); // 123

Previous Comment: I'm not sure if I get your question right but according to your last sentence:

want to access this data.(some_primaryid) just like we access the array using key and assign key using variable. Is it possible? if so How?

Yes it is possible, you can access properties like that:

console.log(ddata['some_primaryid']);
ddata['some_primaryid'] = '123';

edited Jan 23, 2018 at 13:52

answered Jan 23, 2018 at 13:32

Benjamin Schäublin

1,6861 gold badge18 silver badges26 bronze badges

1 Comment

Talk is Cheap Show me Code Over a year ago

Yes you got my point right but instead of static name 'some_primaryid' can I use ddata[primary_id_var] where primary_id_var holds name of the primary id .

Collectives™ on Stack Overflow

How can I access this JSON element dynamically in Typescript?

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related