Question

我设法从Twitch api查询数据，但是这些数据随机显示不正确。我一直认为这个问题是由于我的角度做错了。这是我的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”为null并且您正在为“channels”发出另一个请求，则必须将temp对象添加到“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();        
    }
})

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

1 个答案: