How To Iterate Json Object With Array And Populate Table Using Angular Js

I have a REST service that returns me a JSON data similar to the below format: { 'Africa' : [{ 'country' : 'Nigeria', 'capital' : 'Abuja' }, {

Solution 1:

Try this one Fiddle

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

Solution 2:

You could try something like this:

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

This creates a tbody for every continent, and a tr for every country. Only the first row of a continent gets a cell for the name of that continent. That cell also gets a rowspan attribute so that it spans multiple rows.

Demo