在获取前端输出时查询循环访问JSON数据集

时间:2017-10-27 14:39:19

标签: javascript angularjs json

我正在使用这个JSON数据,我希望得到输出,因为第一行将包含" EPL-2015"。第二个是#34;比赛第一天和第34天。第三行为"日期"第四行是" Team1 VS Team2"。但我在第1行只获得了正确的输出,而我没有得到剩余的输出。请帮助我完成其余部分。我认为我在循环JSON数据时做错了。

var myApp = angular.module('futsalApp', []); 

myApp.controller('futsalController', function($scope) {

  $scope.fixtures = 
  {
       "name": "EPL-2015",
       "rounds":
       [ 
       {
        "name": "Match Day 1",
        "matches": 
        [
        { 
          "date": "2015-08-08",
          "team1":
          { 
            "key": "manutd",
            "name": "Manchester United",
            "code": "MUN"
          },

          "team2":
          {
            "key": "tottenham",
            "name": "Tottenham Hotspur",
            "code": "TOT"
          },
          "score1": 1,
          "score2": 0
        },

        {
          "date": "2015-08-08",
          "team1":
          {
            "key": "bournemouth",
            "name": "Bournemouth",
            "code": "BOU"
          },
          "team2": 
          {
            "key": "astonvilla",
            "name": "Aston Villa",
            "code": "AVL"
          },
          "score1": 0,
          "score2": 1
        }
      ]
      }
      ]
    }

})

<div class="row">
  <div class="col-lg-8 col-lg-offset-2">
    <div class="fixtures-first" ng-repeat="fix in fixtures">
      <a>
        <h2 class="match-title"> {{fixtures.name}} </h2>
        <p class="match-day"> {{fixtures.rounds.name}} </p>
        <p class="match-day"> {{fixtures.rounds.matches.date}} </p>
      </a>
    </div>
  </div>
</div>

1 个答案:

答案 0 :(得分:0)

以下是问题所在。在这一行:

<div class="fixtures-first" ng-repeat="fix in fixtures"> 

...你没有正确设置你的循环。 fixtures是一个Javascript对象,而不是一个数组,所以你没有按照你想要的方式循环。你也从不使用fix来做任何事情,所以我认为你误解了如何使用ng-repeat

你可能想做的是重复你的matches数组,这是一个实际的数组。请注意,fixtures.rounds[0]rounds数组的第一个元素。

<div class="row"> 
    <div class="col-lg-8 col-lg-offset-2"> 
        <div class="fixtures-first" ng-repeat="match in fixtures.rounds[0].matches"> 
            <a> 
               <h2 class="match-title"> {{fixtures.name}} </h2> 
               <p class="round-name"> {{fixtures.round[0].name}} </p> 
               <p class="match-day"> {{match.date}} </p> 
            </a> 
        </div> 
    </div> 
</div>