Question

我有一个嵌套的json对象数组，如下所示。我想解析，以便我可以使用ng-repeat读取并在html表中显示。在表中，名称将成为标题，值将成为每行中的单元格。你能帮我解决一下如何在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"
            }
         ]
     } 
 ]

Answer 1

这是你的表应该是这样的：

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

查看有效的plunkr https://plnkr.co/edit/MyUaovStvxj58RIy0CW7?p=preview

<强>更新

你可以使用order -y和ng-repeat作为davidkonrad提到：

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

Answer 2

为Joe的答案添加额外的东西。如果您计划从单独的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;
    });
  }
})();

使用AngularJs中嵌套的json对象数组进行ng-repeat

2 个答案: