iterating through nested collections to create table with Angular ng-repeat - html

Question

I'm learning Angular and came across some difficulty when creating table from nested collection.
I simplified a bit my data and table for this example. Please help ;)
Here is what I want to achieve (note continent and country can span across multiple columns):
Continent: | Europe | Asia |
Country: | UK | Spain | China |
City: | Edinburgh | London | Barcelona | Beijing |
Population:| 500000 | 9000000 | 15000000 | 22000000 |
Here is data structure:
function playerCtrl($scope) {
$scope.continents = [
{
"continent": "Europe",
"columnSpan": 3,
"countries": [
{
"country": "UK",
"columnSpan": 2,
"cities": [
{
"city": "Edinburgh",
"info": [
{"population": 500000}
]
},
{
"city": "London",
"info": [
{"population": 9000000}
]
}
]
},
{
"country": "Spain",
"columnSpan": 1,
"cities": [
{
"city": "Barcelona",
"info": [
{"population": 15000000}
]
}
]
}
]
},
{
"continent": "Asia",
"columnSpan": 1,
"countries": [
{
"country": "China",
"columnSpan": 1,
"cities": [
{
"city": "Beijing",
"info": [
{"population": 22000000}
]
}
]
}
]
}
];
}
Here is what I have so far for HTML (continents row is easy, struggling with rest):
<div ng-app>
<div class="container-fluid">
<div class="row">
<!-- Player section -->
<div class="col-sm-8" ng-controller="playerCtrl">
<table class="table table-bordered">
<tr>
<th>Continent:</th>
<td ng-repeat="continent in continents" colspan="{{continent.columnSpan}}">{{continent.continent}}</td>
</tr>
<tr>
<th>Country:</th>
<td ng-repeat="country in continents.countries" colspan="{{country.columnSpan}}">{{country.country}}</td>
</tr>
<tr>
<th>City:</th>
<td ng-repeat="city in country.cieties in continents.countries">{{city.city}}</td>
</tr>
<tr>
<th>Population:</th>
<td ng-repeat="city in country.cieties in continents.countries">{{city.info.population}}</td>
</tr>
</table>
</div>
Link to jsfiddle : https://jsfiddle.net/7on62750/

Answer 1

With a little help of a friend I managed to solve this!
solution was to create functions that get me sub-collections.
Feels a bit hacky so feel free to post better solutions.
JS:
function GetCountries(continents) {
var cuntries = [];
for (var i = 0; i < continents.length; i++) {
var a = continents[i];
cuntries = cuntries.concat(a.countries);
}
return cuntries;
}
$scope.GetCountries = function(continents) {
return GetCountries(continents);
}
$scope.GetCities = function(continents) {
var countries = GetCountries(continents);
var cities = [];
for (var i = 0; i < countries.length; i++) {
var a = countries[i];
cities = cities.concat(a.cities);
}
return cities;
}
Html:
<table class="table table-bordered">
<tr>
<th>Continent:</th>
<td ng-repeat="continent in continents" colspan="{{continent.columnSpan}}">{{continent.continent}}</td>
</tr>
<tr>
<th>Country:</th>
<td ng-repeat="country in GetCountries(continents)" colspan="{{country.columnSpan}}">{{country.country}}</td>
</tr>
<tr>
<th>City:</th>
<td ng-repeat="city in GetCities(continents)">{{city.city}}</td>
</tr>
<tr>
<th>Population:</th>
<td ng-repeat="city in GetCities(continents)">{{city.info[0].population}}</td>
</tr>
</table>
jsfiddle: https://jsfiddle.net/2guo5p6d/