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

Question

我已经设法从 Twitch api 查询数据，但是该数据随机且错误地显示。我一直认为这个问题是由于我的 angular 做错了什么。这是我的翡翠 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}}

当您将临时元素添加到 $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();        
    }
})

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

My data is displaying incorrectly. Jade and AngularJS

javascript

angularjs

pug