2016-09-25 57 views
1

使用足球api構建一個Angular應用程序,數據載入的很好,但我不確定如何打電話給hometeam得分手而不是所有得分手。我將如何調用這個JSON數據?

例如,在下面的JSON數據中,它具有'events'對象,並且裏面有一個'player'屬性來顯示記分員。

但我想分別分配家庭和訪客記分員。

我該怎麼做? :)

感謝

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>angular</title> 
</head> 
<body ng-app="myApp"> 
    <div ng-controller="MainController"> 
     <ul ng-repeat="score in scores"> 
      <li>{{ score.localteam_name}}</li> 
      <li>{{ score.localteam_score}}</li> 
      <li>{{ score.visitorteam_name}}</li> 
      <li>{{ score.visitorteam_score}}</li> 
      <li>{{ score.status}}</li> 
      <li ng-repeat="scorer in score.events">{{ scorer.player }}</li> 

     </ul> 
    </div> 
<script src="https://code.jquery.com/jquery-3.1.0.slim.min.js" integrity="sha256-cRpWjoSOw5KcyIOaZNo4i6fZ9tKPhYYb6i5T9RSVJG8=" crossorigin="anonymous"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script> 

<!-- App --> 
<script type="text/javascript" src="js/app.js"></script> 

<!-- Controller --> 
<script type="text/javascript" src="js/controller/maincontroller.js"></script> 

</body> 
</html> 

JSON數據

[ 
    { 
    "id": "1921980", 
    "comp_id": "1204", 
    "formatted_date": "03.01.2016", 
    "season": "2015/2016", 
    "week": "20", 
    "venue": "Selhurst Park (London)", 
    "venue_id": "1265", 
    "venue_city": "London", 
    "status": "FT", 
    "timer": "string", 
    "time": "13:30", 
    "localteam_id": "9127", 
    "localteam_name": "Crystal Palace", 
    "localteam_score": "0", 
    "visitorteam_id": "9092", 
    "visitorteam_name": "Chelsea", 
    "visitorteam_score": "3", 
    "ht_score": "[0-1]", 
    "ft_score": "[0-3]", 
    "et_score": "string", 
    "penalty_local": "string", 
    "penalty_visitor": "string", 
    "events": [ 
     { 
     "id": "21583632", 
     "type": "goal", 
     "minute": "29", 
     "extra_min": 0, 
     "team": "visitorteam", 
     "player": "Oscar", 
     "player_id": "57860", 
     "assist": "D. Costa", 
     "assist_id": "60977", 
     "result": "[0-1]" 
     } 
    ] 
    } 
] 
+1

它不完全清楚你的問題是什麼;您似乎擁有所需的全部信息,儘管您提供的示例數據並不是您可能遇到的所有可能狀態的最佳表示形式。它應該很簡單,過濾'events.team ==='visitorteam';雖然在這種情況下,你只有一個事件..... – Claies

回答

2

有時在編程某一段代碼沒有一個神奇的解決方案,你必須找到自己做的正確方法。如果事件數組要持有10-20個對象,我強烈建議您保持原樣並加載所有得分手。如果將被填充到O(n)和你沒有上添加(例如1000)的活動量控制再就是兩個選項:

  1. 如果從API加載JSON或從某個特定的數據庫接收它,那麼您無法在不重複事件的情況下更改它。這意味着如果你想遍歷事件數組,你可以傳遞每一個事件,檢查它是家鄉還是訪問者,並建立兩個新的事件數組,homeEvents和visitorEvents。然後用兩個替換原來的事件變量,你將有完美的控制選擇家庭或訪客事件。
  2. 如果您自己構建該json,然後使用homeEvents和visitorEvents構建它,而不是要使用的events變量。

這兩個選項基本上給你同樣的解決方案,數字1是當你收到的JSON的是,而數字2是當你自己建立它。

請注意這是一個通用的解決方案,如果您是angularjs的新手,並且需要幫助,請在評論中告訴我,我會在代碼中附上一段代碼(請告訴我它是否爲1號或2)。祝你好運!

+0

嗨Liron,很好的答案。是的,我只有一個月才學習Angular,所以我還不是很棒:D。我正在使用API​​,因此我無法更改JSON數據。如果您有時間,例如編號1的代碼段會很好。謝謝:) –

+0

@ Ql.soa在我的下面回答了一段代碼,如果你不明白,請告訴我,我會添加評論或稍微更改代碼以使其更清楚(這很基本,我相信如果你仔細閱讀它兩次,你會得到它) –

+0

如果你可以打破它,這將是偉大的= D –

1

,你可以把他們分成兩個數組這樣

var i, item, j, k, len, len1, ref, ref1, rows; 

ref = $scope.scores; 
for (i = j = 0, len = ref.length; j < len; i = ++j) { 
    rows = ref[i]; 
    rows.homeEvents = []; 
    rows.visitorEvents = []; 
    ref1 = rows.events; 
    for (i = k = 0, len1 = ref1.length; k < len1; i = ++k) { 
    item = ref1[i]; 
    if (item.team === 'visitorteam') { 
     rows.visitorEvents.push(item); 
    } else if (item.team === 'hometeam') { 
     rows.homeEvents.push(item); 
    } 
    } 
} 

然後在你的HTML你可以用NG-重複顯示則

<li ng-repeat="scorer in score.visitorEvents">{{ scorer.player }}</li> 
<li ng-repeat="scorer in score.homeEvents">{{ scorer.player }}</li>