javascript - 我的数据显示不正确。 Jade 和 AngularJS

Question

我已设法从 Twitch api 查询数据，但该数据显示随机且不正确。我一直认为这个问题是由于我的 Angular 做错了。这是我的 Jade html:

main(ng-app='heyTwitch')
  section(ng-controller='MainCtrl')
    header
      ul#mainMenu
        li

    ul#people(ng-repeat='user in getdata')
      li
        a(href='http://twitch.tv/{{user[0]["data"].display_name}}' target='_blank') {{user[0]["data"].display_name}}

        img(ng-src='{{user[0]["data"].logo}}' err-src='http://placehold.it/50x50').pic

这是我处理数据的 JavaScript 代码段:

function addData(username) {
    var temp = [];
    var url = "https://api.twitch.tv/kraken/streams/" + username + "?callback=?";
    $.getJSON(url, function() {}).done(function(data) {
      if (data.stream === null) {
        url = "https://api.twitch.tv/kraken/channels/" + username + "?callback=?";
        $.getJSON(url, function(data) {
          temp.push({"username":username, "data":data,"status": false});
          count--;
          if (count === 0) {
            //temp = temp.sort();
          }
        });
      } else {
        temp.push({"username":username, "data":data,"status": false});
        count--;
        if (count === 0) {
          //temp = temp.sort();
        }
      }
      $scope.getdata.push(temp);
      $scope.getdata.sort;
      console.log($scope.getdata);
      $scope.$apply();
    })
  }

我做错了什么，我的数据无法正确显示？我的整个应用程序在这里:http://codepen.io/Feners4/pen/EjONEe

Answer 1

首先，重复应该位于 li 元素而不是 ul 元素:

li#people(ng-repeat='user in getdata')

这将使一个 ul 元素包含多个 li 元素，而不是一个 ul 和一个 li 元素每个玩家。 (注意:您必须更新 css 以匹配此内容。)

其次，对于临时对象，使用字典比列表更好:

var temp = {};

然后设置临时值，如下所示:

temp = {
    "username": username,
    "data": data,
    "status": false
};

而不是:

a(href='http://twitch.tv/{{user[0]["data"].display_name}}' target='_blank') {{user[0]["data"].display_name}}

现在应该如下所示([0] 已删除):

a(href='http://twitch.tv/{{user.data.display_name}}' target='_blank') {{user.data.display_name}}

当您将 temp 元素添加到 $scope.getdata 时，您必须在正确的位置执行此操作。如果“streams”为空并且您正在对“channels”发出另一个请求，则必须将临时对象添加到“channels”请求的响应处理程序中的列表中。你可以这样做:

var app = angular.module('heyTwitch', []);
app.controller('MainCtrl', function($scope, $http) {

    var users = ["freecodecamp", "GeoffStorbeck", "terakilobyte", "habathcx", "notmichaelmcdonald", "RobotCaleb", "medrybw", "comster404", "brunofin", "thomasballinger", "joe_at_underflow", "noobs2ninjas", "mdwasp", "beohoff", "xenocomagain"];

    var count = 0;
    count = users.length;

    $scope.getdata = [];

    users.map(function(user) {
        addData(user);

    })

    function addData(username) {
        var temp = {};
        var url = "https://api.twitch.tv/kraken/streams/" + username + "?callback=?";
        $.getJSON(url, function() {}).done(function(data) {
            if (data.stream === null) {
                console.log("Stream is null for " +username);
                url = "https://api.twitch.tv/kraken/channels/" + username + "?callback=?";
                $.getJSON(url, function(data) { 
                    addPlayer(username, data);
                });
            } else {
                addPlayer(username, data);
            }
        })
    }

    //Add player to list of players
    function addPlayer(username, data){
        //TODO: Check that data is valid here
        var temp = {
            "username": username,
            "data": data,
            "status": false
        };        
        $scope.getdata.push(temp);
        $scope.$apply();        
    }
})