如何使用 Angular JS 使用数组迭代 JSON 对象并填充表答案

【问题标题】：How to iterate JSON object with array and populate table using Angular JS如何使用 Angular JS 使用数组迭代 JSON 对象并填充表
【发布时间】：2016-11-02 17:57:46
【问题描述】：

我有一个 REST 服务，它向我返回类似于以下格式的 JSON 数据：

{
    "Africa" : [{
            "country" : "Nigeria",
            "capital" : "Abuja"
        }, {
            "country" : "Kenya",
            "capital" : "Nairobi"
        }, {
            "country" : "Ghana",
            "capital" : "Accra"
        }
    ],
    "Asia" : [{
            "country" : "India",
            "capital" : "New Delhi"
        }, {
            "country" : "China",
            "capital" : "Beijing"
        }
    ],
    "Europe" : [{
            "country" : "France",
            "capital" : "Paris"
        }
    ]
}

我应该如何解析这个结果并填充一个类似于下图的表格：

http://jsfiddle.net/p7yLztwg/

【问题讨论】：

标签： javascript angularjs json

【解决方案1】：

试试这个Fiddle

<table ng-app="testApp" ng-controller="testController">
<tr>
  <td>Contitent</td>
  <td>Country</td>
  <td>Capital</td>
</tr>
<tr ng-repeat-start="(key, val) in testData">
    <td rowspan="{{val.length}}">{{key}}</td>
    <td>{{val[0].country}}</td>
    <td>{{val[0].capital}}</td>
</tr>
<tr ng-repeat-end ng-repeat="value in val.slice(1)">
    <td>{{value.country}}</td>
    <td>{{value.capital}}</td>
</tr>

【讨论】：

谢谢。 ng-repeat-start/ng-repeat-end 解决方案看起来很整洁。但与@wander-nauta 相比，我不确定此解决方案的性能
我看不出这两种方法之间有什么大的性能影响，你可以测试更大的数据，比如 100K 行......

【解决方案2】：

你可以试试这样的：

<table>
  <thead>
    <tr>
      <th>Continent</th>
      <th>Country</th>
      <th>Capital</th>
    </tr>
  </thead>
  <tbody ng-repeat="(continent, countries) in yourjsondata">
    <tr ng-repeat="country in countries">
      <td ng-if="$first" rowspan={{countries.length}}>{{ continent }}</td>
      <td>{{ country.country }}</td>
      <td>{{ country.capital }}</td>
    </tr>
  </tbody>
</table>

这将为每个大陆创建一个tbody，并为每个国家/地区创建一个tr。只有大陆的第一行有一个用于该大陆名称的单元格。该单元格还有一个rowspan 属性，因此它可以跨越多行。

Demo

【讨论】：