如何获取 json 嵌套对象的数据？

Question

我是一个学习 angularjs 的新手。我正在尝试访问外部 api 以从中获取数据。

下面的图片链接是我从那个api发出http请求后得到的json数据：

在 js 文件中，我将数据保存为$scope.jsondata = data;

我想创建一个如下所示的表：

<div class="container" ng-controller="controller"> 
<table ng-repeat="data in jsondata">
<tr>
    <th>Date</th>
    <th>age</th>
    <th>avg<th>
    <th>num_payments</th>
</tr>
<tr>
    <td> ?</td>
    <td> ?</td>
    <td> ?</td>  // dont know what to give 
</tr>
<table>

因为当我尝试访问像 jsondata.stats.histogram 这样的变量时，什么都没有出现。 如果我给jsondata.stats 并打印它们，我会得到以下输出

1.[{"date":"201311","histogram":[{"ages":"=66","num_payments":70881,"avg":400.2},{"ages":"Unknown","num_payments" :4133,"avg":658.82}]},{"date":"201312","histogram":[{"ages":"=66","num_payments":75534,"avg":373.36},{"ages":"未知","num_payments":4075,"avg":609.47}]},{"date":"201401","histogram":[{"ages":"=66","num_payments":77767,"avg":386.73},{"ages":"未知","num_payments":4084,"avg":674.42}]} ,{"date":"201402","histogram":[{"ages":"=66","num_payments":65938,"avg":397.11},{"ages":"未知","num_payments":3685,"avg ":629.59}]},{"date":"201403","histogram":[{"ages":"=66","num_payments":67746,"avg":403.84},{"ages":"未知","num_payments":3786,"avg":644.84}]},{"date": "201404","直方图":[{"ages":"=66","num_payments":74967,"avg":392.94},{"ages":"未知","num_payments":3848,"avg":548.89}]} ] 2.

Answer 1

首先您必须了解您的数据结构。它是具有日期属性的对象数组。对于那些每个日期都有直方图数组。所以会有数组需要迭代。

我假设您将为每个统计日期创建一个表，并且在该表的每一行中您要列出直方图数据。所以我们需要在表级别迭代日期。稍后在行级别，我们将迭代直方图数组。 html 的结构如下所示。你可以在this link 中看到它。该示例显示在本地启动的数据。但它与从服务器获取的数据相同。此外阅读此documentation 以了解更多有关角度数据迭代的信息。

<div class="container" ng-controller="MyCtrl">
  <table ng-repeat="data in jsondata" border='1'> <!-- table level iteration -->
  <tr>
    <th>Date</th>
    <th>age</th>
    <th>avg</th>
    <th>num_payments</th>
  </tr>
  <tr ng-repeat='histo in data.histogram'> <!-- row level iteration -->
    <td>{{data.date}}</td>
    <td>{{histo.ages}}</td>
    <td>{{histo.avg}}</td>
    <td>?</td>
  </tr>
</table>