How to iterate JSON object with array and populate table using Angular JS

Question

I have a REST service that returns me a JSON data similar to the below format:

{
    "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"
        }
    ]
}

How should I parse this result and populate a table which would look similar to the image below:

http://jsfiddle.net/p7yLztwg/

Answer 1

Try this one 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>

Answer 2

You could try something like this:

<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>

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