AngularJS ng-repeat directive with complex nested data structure and dynamic keys

Question

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.

Vishwanath · Accepted Answer · 2015-02-24 12:42:00Z

1

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>

answered Feb 24, 2015 at 12:42

Vishwanath

6,0146 gold badges40 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jesús Quintana · Accepted Answer · 2015-02-24 12:31:52Z

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"
                }]
            }
        }
    }
    };
});

Collectives™ on Stack Overflow

AngularJS ng-repeat directive with complex nested data structure and dynamic keys

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related