javascript - How to display the keys value from a JSON array in an AngularJS application? -

javascript - How to display the keys value from a JSON array in an AngularJS application? -

question is: how league titles given json show in #league title here#? else works fine, show in league categories. appreciate constructive feedback!

my html:

<div class="col-lg-12" ng-controller="leaguesctrl"> <div ng-repeat="league in leagues"> league: {{<league title here>}} <table> <tr ng-repeat="match in league"> <td style="padding: 0 5px">{{match.home_team}}</td> <td style="padding: 0 5px">-</td> <td style="padding: 0 5px">{{match.away_team}}</td> <td style="padding: 0 5px; text-align: right"><a href="#">{{match.home_odds}}</a></td> <td style="padding: 0 5px; text-align: right"><a href="#">{{match.draw_odds}}</a></td> <td style="padding: 0 5px; text-align: right"><a href="#">{{match.away_odds}}</a></td> </tr> </table> <br /> </div> </div>

my json:

{ "uefa champions league": [ { "id": 152494, "slug": "apoel_nicosia-paris_sg-1737708", "home_team": "apoel nicosia", "home_short": "", "home_logo": "\/\/dxnxhx88pdxyv.cloudfront.net\/logo\/32\/t30769.png", "away_team": "paris sg", "away_short": "", "away_logo": "\/\/dxnxhx88pdxyv.cloudfront.net\/logo\/32\/t1784.png" }, { "id": 152519, "slug": "chelsea-maribor-1737738", "home_team": "chelsea", "home_short": "", "home_logo": "\/\/dxnxhx88pdxyv.cloudfront.net\/logo\/32\/t497.png", "away_team": "maribor", "away_short": "", "away_logo": "\/\/dxnxhx88pdxyv.cloudfront.net\/logo\/32\/t61675.gif" } ], "barclays premier league": [ { "id": 126938, "slug": "arsenal-hull-1640783", "home_team": "arsenal", "home_short": "", "home_logo": "\/\/dxnxhx88pdxyv.cloudfront.net\/logo\/32\/t30773.png", "away_team": "hull", "away_short": "", "away_logo": "\/\/dxnxhx88pdxyv.cloudfront.net\/logo\/32\/t511.png" }, { "id": 126942, "slug": "manchester_c-tottenham-1640787", "home_team": "manchester c", "home_short": "man c", "home_logo": "\/\/dxnxhx88pdxyv.cloudfront.net\/logo\/32\/t383.png", "away_team": "tottenham", "away_short": "man c", "away_logo": "\/\/dxnxhx88pdxyv.cloudfront.net\/logo\/32\/t498.png" } ] }

my angularjs controller:

myapp("leaguesctrl", function($scope, $http) { $http.get('http://api.odds24.com/best-odds?user=dev&leagues=socengpre,socintchl,socesppri'). success(function(data, status, headers, config) { $scope.leagues = data; }); });

you have specify in ng-repeate, this;

<div class="col-lg-12" ng-controller="leaguesctrl"> <div ng-repeat="(key, league) in leagues"> league: {{key}} <table> <tr ng-repeat="match in league"> <td style="padding: 0 5px">{{match.home_team}}</td> <td style="padding: 0 5px">-</td> <td style="padding: 0 5px">{{match.away_team}}</td> <td style="padding: 0 5px; text-align: right"><a href="#">{{match.home_odds}}</a></td> <td style="padding: 0 5px; text-align: right"><a href="#">{{match.draw_odds}}</a></td> <td style="padding: 0 5px; text-align: right"><a href="#">{{match.away_odds}}</a></td> </tr> </table> <br /> </div> </div>

then utilize {{key}} .

here plunker.

javascript json angularjs angularjs-ng-repeat ng-repeat