current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite

Question is: How do I get the league titles from the given JSON to show in #LEAGUE TITLE HERE#? Everything else works just fine, but I would like for it to show up in league categories. I appreciate any 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;
    });
});
share|improve this question

2 Answers 2

up vote 1 down vote accepted

You have to specify in the ng-repeate, so like 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 just use {{key}} .

Here is a plunker.

share|improve this answer
up vote 0 down vote

You would just use the key/value option in the ng-repeat. So it would look something like this:

<div ng-repeat="name, detail in league">

You then just reference it by using {{name}}.

More info in the docs for ng-repeat page.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.