[英]ng-repeat with the nested json array of objects in AngularJs
I have a nested json array of objects as below. 我有一个嵌套的对象的json数组,如下所示。 I wanted to parse so that I can read using ng-repeat and display in the html table. 我想解析,以便可以使用ng-repeat进行阅读并显示在html表中。 In the table, names will become headers and values become cells in each row. 在表中,名称将成为标题,而值将成为每一行中的单元格。 can you please help me as how to do this in angularjs ? 您能帮我吗,如何在angularjs中做到这一点?
[
{
"records":
[
{
"cells": [
{"id": "102", "value": "John"},
{"id": "101", "value": "222"},
{"id": "103", "value": "600987"}
]
},
{
"cells": [
{"id": "103", "value": "69987"},
{"id": "101", "value": "999"},
{"id": "102", "value": "Susan"}
]
}
],
"headers": [
{
"id": "101",
"name": "emp_id"
},
{
"id": "102",
"name": "emp_name"
},
{
"id": "103",
"name": "emp_salary"
}
]
}
]
Here is your table should be like this: 这是你的桌子应该是这样的:
<table>
<tr>
<th ng-repeat="h in list[0].headers">{{h.name}}</th>
</tr>
<tr ng-repeat="record in list[0].records">
<th ng-repeat="cell in record.cells">{{cell.value}}</th>
</tr>
</table>
See a working plunkr https://plnkr.co/edit/MyUaovStvxj58RIy0CW7?p=preview 看到工作正常的plunkr https://plnkr.co/edit/MyUaovStvxj58RIy0CW7?p=preview
Update: 更新:
And you can use orderBy with ng-repeat as davidkonrad mentioned: 您可以将davidkonrad提到的ng-repeat与orderBy一起使用:
<table>
<tr>
<th ng-repeat="h in list[0].headers | orderBy: 'id'">{{h.name}}</th>
</tr>
<tr ng-repeat="record in list[0].records">
<th ng-repeat="cell in record.cells | orderBy: 'id'">{{cell.value}}</th>
</tr>
</table>
Adding something extra to Joe's answer. 在Joe的答案中添加其他内容。 If you are planning to get the data from a separate JSON file, you can use the following code in your .js file. 如果您打算从单独的JSON文件中获取数据,则可以在.js文件中使用以下代码。
(function () {
'use strict';
angular.module('plunker', [])
.controller('MainCtrl', MainCtrl);
MainCtrl.$inject = ['$scope', '$http'];
function MainCtrl($scope, $http) {
$http.get('[path to your JSON file]/data.json').success(function (data) {
$scope.list= data;
});
}
})();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.