I'm having trouble implementing this data structure in angularjs using ng-repeat. It may be that I'm using the wrong method altogether. All I know is that I could do this fine using handlebars but struggling to replicate in ionic/angularjs
{
"germany": {
"tournaments": {
"2. Bundesliga": {
"fixtures": [{
"c": "Germany",
"id": "1479628",
"l": "2. Bundesliga",
"h": "Arminia Bielefeld",
"hs": "2",
"as": "2",
"a": "St. Pauli",
"sd": "February 9th 2014",
"tt": "GameEnded",
"t": "Sunday, February 9, 2014 - 15:23",
"st": "finished",
"sn": "Finished",
"ko": "FT"
}, {
"c": "Germany",
"id": "1479621",
"l": "2. Bundesliga",
"h": "FC Cologne",
"hs": "0",
"as": "1",
"a": "Paderborn",
"sd": "February 9th 2014",
"tt": "GameEnded",
"t": "Sunday, February 9, 2014 - 15:22",
"st": "finished",
"sn": "Finished",
"ko": "FT"
}, {
"c": "Germany",
"id": "1479627",
"l": "2. Bundesliga",
"h": "Karlsruhe",
"hs": "1",
"as": "1",
"a": "Ingolstadt",
"sd": "February 9th 2014",
"tt": "GameEnded",
"t": "Sunday, February 9, 2014 - 15:22",
"st": "finished",
"sn": "Finished",
"ko": "FT"
}]
}
}
},
"england": {
"tournaments": {
"Premier League": {
"fixtures": [{
"c": "England",
"id": "1474967",
"l": "Premier League",
"h": "Tottenham Hotspur",
"hs": "1",
"as": "0",
"a": "Everton",
"sd": "February 9th 2014",
"tt": "GameEnded",
"t": "Sunday, February 9, 2014 - 16:19",
"st": "finished",
"sn": "Finished",
"ko": "FT"
}, {
"c": "England",
"id": "1474962",
"l": "Premier League",
"h": "Manchester United",
"hs": "2",
"as": "2",
"a": "Fulham",
"sd": "February 9th 2014",
"tt": "GameEnded",
"t": "Sunday, February 9, 2014 - 18:53",
"st": "finished",
"sn": "Finished",
"ko": "FT"
}]
}
}
}
The idea is to loop over all the countries, then the tournaments, then the fixtures to end up with something like this
Header - Germany
Subheader - Bundesliga
Fixture 1 - Foo vs Bar
Fixture 2 - Baz vs Foo
Header - England
Subheader - Premiere League
I'll spare the massive amount of json and have cut it short to just a small sample.
So far I have got as far as
<div class="list" ng-repeat="(key, data) in livescores">
<div class="item item-divider">
{{ key}}
</div>
<div class="item item-divider" ng-repeat="(key, data) in data.tournaments">
{{ key}}
</div>
But just can't seem to get it clear in my head.
Plunkr http://plnkr.co/edit/yMBnY4YgHZNwyw9vr0AR?p=preview
<div class="country" ng-repeat="(countryIndex, country) in data">
<div>{{countryIndex}}</div>
<div class="tourney" ng-repeat="(tournamentName, tournament) in country.tournaments">
<div >{{tournamentName}}</div>
<div class="fixtures" ng-repeat="fixtures in tournament.fixtures">
<div ng-repeat="fixture in fixtures">
{{fixture}}
</div>
</div>
</div>
</div>
You must iterate for each and in features get the respective key and value:
Example: Plunkr: http://plnkr.co/edit/D3oPIIEohR3BFvSazR95?p=preview
HTML
<div class="list" ng-repeat="(name, country) in countries">
<div class="item item-divider">
{{ name}}
</div>
<div class="item item-divider" ng-repeat="(name, tournament) in country.tournaments">
{{ name}}
<div class="item item-divider" ng-repeat="fixture in tournament.fixtures">
{{ fixture.h}} vs {{fixture.a}}
</div>
</div>
</div>
Controller
app.controller('MainCtrl', function($scope) {
$scope.countries = {
"germany": {
"tournaments": {
"2. Bundesliga": {
"fixtures": [{
"c": "Germany",
"id": "1479628",
"l": "2. Bundesliga",
"h": "Arminia Bielefeld",
"hs": "2",
"as": "2",
"a": "St. Pauli",
"sd": "February 9th 2014",
"tt": "GameEnded",
"t": "Sunday, February 9, 2014 - 15:23",
"st": "finished",
"sn": "Finished",
"ko": "FT"
}, {
"c": "Germany",
"id": "1479621",
"l": "2. Bundesliga",
"h": "FC Cologne",
"hs": "0",
"as": "1",
"a": "Paderborn",
"sd": "February 9th 2014",
"tt": "GameEnded",
"t": "Sunday, February 9, 2014 - 15:22",
"st": "finished",
"sn": "Finished",
"ko": "FT"
}, {
"c": "Germany",
"id": "1479627",
"l": "2. Bundesliga",
"h": "Karlsruhe",
"hs": "1",
"as": "1",
"a": "Ingolstadt",
"sd": "February 9th 2014",
"tt": "GameEnded",
"t": "Sunday, February 9, 2014 - 15:22",
"st": "finished",
"sn": "Finished",
"ko": "FT"
}]
}
}
},
"england": {
"tournaments": {
"Premier League": {
"fixtures": [{
"c": "England",
"id": "1474967",
"l": "Premier League",
"h": "Tottenham Hotspur",
"hs": "1",
"as": "0",
"a": "Everton",
"sd": "February 9th 2014",
"tt": "GameEnded",
"t": "Sunday, February 9, 2014 - 16:19",
"st": "finished",
"sn": "Finished",
"ko": "FT"
}, {
"c": "England",
"id": "1474962",
"l": "Premier League",
"h": "Manchester United",
"hs": "2",
"as": "2",
"a": "Fulham",
"sd": "February 9th 2014",
"tt": "GameEnded",
"t": "Sunday, February 9, 2014 - 18:53",
"st": "finished",
"sn": "Finished",
"ko": "FT"
}]
}
}
}
};
});