Unable to get proper 'key' value from JSON - AngularJS
Question
My goal is to achieve table in the below format using AngularJS from the below sample nested JSON.
{
"traits": ["Number of Observations","Observed Number of Exceptions","95-99", "95-95","99-95", "99-99"],
"values": [
{
"AAAA1": {
"Number of Observations": 252,
"95-95": {
"Test Statistic": -1.040531963428947,
"P-Value": 0.85095358899764695,
"Test Outcome": "p-value >=0.05"
},
"95-99": {
"Test Statistic": 5.368809379876272,
"P-Value": 3.9629067916102656e-08,
"Test Outcome": "p-value <0.01"
},
"Observed Number of Exceptions": 9
}
},
{
"AAAA2": {
"Number of Observations": 43,
"95-99": {
"Test Statistic": -1.040531963428947,
"P-Value": 0.85095358899764695,
"Test Outcome": "p-value >=0.05"
},
"95-95": {
"Test Statistic": -0.46245865041286727,
"P-Value": 0.67812377583172401,
"Test Outcome": "p-value >=0.05"
},
"Observed Number of Exceptions": 7
}
}
]
}
There are two Objects under 'values' key which in turn will create two rows in the table. My problem in creating the table here with the JSON is, i need to loop through '95-95' Object, '95-99' Object etc and create '3' columns for each object. With this below code, i was able to create 3 columns under the '95-95' Object; but as you can see i hard-coded with ' AAAA1 ' key value in ng-repeat . At row level in table, i am looping with outer-most json;for 'td' creations looping through inner-most JSON object so unable to get middle-level Object key value. Is there any way where can i get it from any the key value 'AAAA1', 'AAAA2' which Object not in any ng-repeat .
<tr ng-repeat="(key,value) in Controller.values">
<td class="text-center" ng-repeat="(key1,value1) in value['AAAA1']['95-95']">
{{value1}}
</td>
As i could not achieve this, i am currently stuck with the below static code which is not very useful for me.
<td class="text-center" ng-repeat="(key1,value1) in value">
{{value1["95-95"]["Test Statistic"]}}
</td>
<td class="text-center" ng-repeat="(key1,value1) in value">
{{value1["95-95"]["P-Value"]}}
</td>
<td class="text-center" ng-repeat="(key1,value1) in value">
{{value1["95-95"]["Test Outcome"]}}
</td>
2 answers
solution1
0 2017-07-18 17:18:56
Because value['AAAA1']['95-95'] must be an Array.
ng-Repeat works only with arrays :(
solution2
0 2017-07-18 19:44:50
If you want to avoid a directive or code in the controller you can do it like this :
const myApp = angular.module('myApp', []); myApp.controller('Ctrl', ($scope) => { $scope.values = [ { "AAAA1": { "Number of Observations": 252, "95-95": { "Test Statistic": -1.040531963428947, "P-Value": 0.85095358899764695, "Test Outcome": "p-value >=0.05" }, "95-99": { "Test Statistic": 5.368809379876272, "P-Value": 3.9629067916102656e-08, "Test Outcome": "p-value <0.01" }, "Observed Number of Exceptions": 9 } }, { "AAAA2": { "Number of Observations": 43, "95-99": { "Test Statistic": -1.040531963428947, "P-Value": 0.85095358899764695, "Test Outcome": "p-value >=0.05" }, "95-95": { "Test Statistic": -0.46245865041286727, "P-Value": 0.67812377583172401, "Test Outcome": "p-value >=0.05" }, "Observed Number of Exceptions": 7 } } ] });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script> <body ng-app="myApp"> <table ng-controller="Ctrl"> <tbody ng-repeat="value in values"> <tr ng-repeat="(name, objectAA) in value"> <th ng-bind="name"></th> <td ng-repeat="(key, value) in objectAA['95-95']" ng-bind="value"> </td> <td ng-repeat="(key, value) in objectAA['95-99']" ng-bind="value"> </td> </tr> </tbody> </table> </body>
To avoid the statics '95-95' and '95-99' in the html you can extract them in the controller.
With specific code in the controller you can do it like this :
const myApp = angular.module('myApp', []); myApp.controller('Ctrl', ($scope) => { $scope.rows = [] $scope.values = [ { "AAAA1": { "Number of Observations": 252, "95-95": { "Test Statistic": -1.040531963428947, "P-Value": 0.85095358899764695, "Test Outcome": "p-value >=0.05" }, "95-99": { "Test Statistic": 5.368809379876272, "P-Value": 3.9629067916102656e-08, "Test Outcome": "p-value <0.01" }, "Observed Number of Exceptions": 9 } }, { "AAAA2": { "Number of Observations": 43, "95-99": { "Test Statistic": -1.040531963428947, "P-Value": 0.85095358899764695, "Test Outcome": "p-value >=0.05" }, "95-95": { "Test Statistic": -0.46245865041286727, "P-Value": 0.67812377583172401, "Test Outcome": "p-value >=0.05" }, "Observed Number of Exceptions": 7 } } ] $scope.values.forEach((value) => { Object.keys(value).forEach((name) => { $scope.rows.push({name: name, value: value[name]}); }); }); });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script> <body ng-app="myApp"> <table ng-controller="Ctrl"> <tr ng-repeat="row in rows"> <th ng-bind="row.name"></th> <td ng-repeat="(key, value) in row.value['95-95']" ng-bind="value"> </td> <td ng-repeat="(key, value) in row.value['95-99']" ng-bind="value"> </td> </tr> </table> </body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.