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

My data is displaying incorrectly. Jade and AngularJS

本文关键字：AngularJS Jade 不正确 数据 显示 我的      更新时间：2023-09-26

我已经设法从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

首先，应该在li元素而不是ul元素处重复:

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

这将使一个ul元素与许多li元素而不是一个ul和一个li元素为每个玩家。(注意:你必须更新你的css来匹配这个)

其次，对于临时对象，最好使用字典而不是列表:

var temp = {};

然后像这样设置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();        
    }
})
相关文章：