遍历 JSON 属性答案

【问题标题】：Iterating over JSON properties遍历 JSON 属性
【发布时间】：2016-08-11 01:15:51
【问题描述】：

我已经成功地使用 $http 服务在角度中使用他们的 API 从另一个服务器中提取 JSON 对象。然后我能够像这样显示这些值......

<div ng-controller="ApiController as ApiCtrl">
{{ApiCtrl.Api.status}}
{{ApiCtrl.Api.meta.count}}
{{ApiCtrl.Api.data[0].nickname}}
{{ApiCtrl.Api.data[0].account_id}}
</div>

这会正确显示值，但我无法显示键。我四处阅读，here 和 here。他们解释说，设置了一个 ng-repeat 来迭代对象并从中提取 keys 和 values。

<div ng-controller="ApiController as ApiCtrl">
  <div>
    <div ng-repeat="(key, value) in Api">
        {{key}} : {{value}}
    </div>
  </div>
</div>

作为参考，这是 ApiController

function ApiController($http) {
    var vm = this;
    vm.Api = [];

    $http.get('...').success(function (data) {
    vm.Api = data;
    });
};

这是我请求的 Json

{
"status": "ok",
"meta": {
    "count": 1
},
"data": [
    {
        "nickname": "Mitcha47",
        "account_id": 1001356515
    }
]
}

第二种方法ng-repeat="(key, value) in Api"不起作用，只在html中显示* ngRepeat: (key, value) in Api *

我很困惑为什么它不起作用，并且不确定它是对语法的错误使用还是不理解 ng-repeat 如何完全起作用。

编辑

在ApiCtrl.Api中改为div ng-repeat="(key,value)"后就产生了->

 status : ok
 meta : {"count":1}
 data : [{"nickname":"Mitcha47","account_id":1001356515}]'

这可以，但不完全是放入表格的格式，这是下一步。这会通过使用.fromJson 函数来解决吗？

我是否包含 ApiCtrl，因为每个模块中可以使用多个控制器，从而使所有内容都指向正确的值？

【问题讨论】：

JSON 是什么样的？至少展示一个样本。
我已经编辑了问题:)
什么是通过 np-repeat 打印的 html 输出示例？
@VickyR 答案中建议的 ng-repeat 更改产生了编辑部分中看到的输出。

标签： angularjs json

【解决方案1】：

您需要在 ng-repeat 中指定控制器。

编辑

根据docs，当您使用controller as 声明时，方法和属性直接绑定到控制器而不是使用$scope，因此您需要指定控制器，因为Api 对象是那个控制器。

我已更改 sn-p 以在表格中显示数据，但我不确定您要显示的确切内容。可以举个例子吗？

<div ng-repeat="(key, value) in ApiCtrl.Api">

angular.module("app", [])
  .controller("ApiController", ApiController);

function ApiController($http) {
  var vm = this;

  vm.Api = {
    status: "good",
    meta: {
      count: 42
    },
    data: [{
      nickname: "Timmy",
      account_id: 1
    }, {
      nickname: "Johnny",
      account_id: 2
    }]
  };
};

table {
  border-collapse: collapse;
}

th,
td {
  border: 1px solid black;
  padding: 5px;
}

th {
  text-align: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="ApiController as ApiCtrl">
    {{ApiCtrl.Api.status}} {{ApiCtrl.Api.meta.count}} {{ApiCtrl.Api.data[0].nickname}} {{ApiCtrl.Api.data[0].account_id}}
  </div>

  <hr>

  <div ng-controller="ApiController as ApiCtrl">
    <div>
      <table>
        <thead>
          <tr>
            <th ng-repeat="(key, value) in ApiCtrl.Api">{{key}}</th>
          </tr>
        </thead>
        <tbody>
          <td ng-repeat="(key, value) in ApiCtrl.Api">
            {{value}}
          </td>
        </tbody>
      </table>
    </div>
  </div>
</div>

【讨论】：

看看我的编辑和后续问题将不胜感激:)
@DrewAckerman 我已经更新了答案，但不确定您想在表格中显示什么。你有一个 status 和 meta 属性，我假设你不想重复这些，而是迭代 data 属性？
我想遍历所有键和值，就像它一样。问题是目前，例如，它显示 Key: Data, Value: [{"nickname":"Mitcha47","account_id":1001356515}]，所有标记都像括号一样。如果它存在，我需要它进入这个额外的数组，例如它在数据中而不是状态中，并将它们分解为不带括号或引号的可读文本。我试过使用 JSON.parse 但似乎无法让它工作。
@DrewAckerman 您希望如何显示它？您是否考虑过自定义过滤器？
@DrewAckerman 删除括号和引号很容易，但是当有多个条目时呢？你要每次都重复“昵称”吗？

【解决方案2】：

如果你使用控制器作为语法，你必须使用

ng-repeat="(key, value) in ApiCtrl.Api"

【讨论】：

【解决方案3】：

可能的问题在这里：

应该是——

    <div ng-repeat="(key, value) in ApiCtrl.Api">
     {{key}} : {{value}}
    </div>

而不是 -

    <div ng-repeat="(key, value) in Api">
     {{key}} : {{value}}
    </div>

【讨论】：