动态填充html中的json数据

Question

我想使用 AngularJS 从 json 文件中填充表格。

json 文件可能会不时变化（动态数据）。

要求是：通过解析json文件将表格填入html。 表在view.html 文件中，AngularJS 代码应该在view.js 中。

JSON 文件：（服务树下的 id 可能更多）

{
"result": {
    "services": [
        {
            "id": 1,
            "name": "My UI for some project that I'm doing that won't fit",
            "application": "app",
            "message": "application",
            "status": 1
        },
        {
            "id": 2,
            "name": "My DB for some project that I'm doing",
            "application": "app1",
            "message": "application1",
            "status": 3
        },
        {
            "id": 3,
            "name": "Another service",
            "application": "app2",
            "message": "application2",
            "status": 3
        }
    ],
 }
}

输出表应如下所示：

PS：应该设置表格对齐方式，因为名称值可能有也可能没有更多信息。

谢谢

Answer 1

虽然，就像@Johannes Jander 所说，Stackoverflow 不是“为我编写代码”服务我会告诉你如何做到这一点。

如果您不介意列的顺序会有所不同，您可以轻松地迭代 throw 对象的属性，而无需操作 json 对象。如果订单很重要，请告诉我，我会帮你弄清楚。

要了解更多关于我们在这里的内容，请点击这些链接：

1. ng-repeat 文档。
2. How can I iterate over the keys, value in ng-repeat in angular

现在，进入代码：

angular.module('app', []).
controller('ctrl', function($scope) {
  $scope.json = {
    "result": {
      "services": [
        {
          "id": 1,
          "name": "My UI for some project that I'm doing that won't fit",
          "application": "app",
          "message": "application",
          "status": 1
        },
        {
          "id": 2,
          "name": "My DB for some project that I'm doing",
          "application": "app1",
          "message": "application1",
          "status": 3
        },
        {
          "id": 3,
          "name": "Another service",
          "application": "app2",
          "message": "application2",
          "status": 3
        }
      ],
    }
  }  
});

table {
  border-collapse: collapse;
}

td {
  border: 1px solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div data-ng-app="app" data-ng-controller="ctrl">
  <table data-ng-if="json.result.services.length > 0">
    <thead>
      <tr>
        <th data-ng-repeat="(key, value) in json.result.services[0]" data-ng-bind="key"></th>
      </tr>
    </thead>
    <tbody>
      <tr data-ng-repeat="service in json.result.services">
        <td data-ng-repeat="(key, value) in service" data-ng-bind="value"></td>
      </tr>
    </tbody>
  </table>
</div>