如何遍歷JSON對象與數組，並採用了棱角分明JS

我有一個返回我類似以下格式的JSON數據REST服務來填充表：如何遍歷JSON對象與數組，並採用了棱角分明JS

{ 
    "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/

來源

2016-11-02 FakirTrappedInCode

試試這個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>

來源

2016-11-02 18:37:30 Markus

謝謝。 ng-repeat-start/ng-repeat-end解決方案看起來很整齊。但是Iam對這個解決方案的性能沒有把握@ wander-nauta – FakirTrappedInCode

在這兩種方法之間我沒有看到任何巨大的性能影響，你需要測試像100K行這樣的大數據...... – Markus

你可以嘗試一些像這樣：

<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

來源

2016-11-02 18:19:07

如何遍歷JSON對象與數組，並採用了棱角分明JS

回答

相關問題