Angularjs 为什么 for/loop 覆盖数组项

Angularjs why for/loop overriding the array items

本文关键字:覆盖 数组 loop 为什么 for Angularjs      更新时间:2023-09-26

我正在尝试使用twitch api,我需要知道哪个用户在线

//Initialize the App
var channels = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];
var app = angular.module('Twitch', []);
//main controller
app.controller("MainController", function ($scope, $http) {
    //Where controller variables are assigned 
    // create the game Object
    var result = {};
    $scope.results = [];
    var stream = {};
    var care = "";
    $scope.streams = [];
    var url = 'https://api.twitch.tv/kraken/channels/';
    for (var x = 0; x < channels.length; x++) {
        $http.jsonp(url + channels[x] + '?callback=JSON_CALLBACK').success(function (data) {
            result = data;
            var id = data._id;
            var name = data.name;
            $scope.url = "http://static-cdn.jtvnw.net/jtv_user_pictures/" + name + "-profile_image-" + id + "-300x300.jpeg";
            $scope.image = data.logo;
            $scope.name = data.name;
            $scope.status = data.status;
            $http.jsonp("https://api.twitch.tv/kraken/streams/" + channels[x] + "?callback=JSON_CALLBACK").success(function (data) {
                var streaming = (data.stream === null) ? false : true;
                if (streaming) {
                    result.off = 'online';
                    var streamTitle = data.stream.channel.status;
                    if (streamTitle.length > 36) {
                        streamTitle = streamTitle.substring(0, 33);
                        streamTitle += '...';
                    }
                    result.streamTitle = streamTitle;
                } else {
                    result.off = 'offline';
                    data.streamTitle = '';
                }
                result.username = channels[x];
            });
            $scope.results.push(result);
            console.log(result);
        }).error(function (data) {
            // something went wrong :(
            console.log('Got nothing');
        });
    }
});

我创建了result.off保存用户状态值的变量

(在线/离线)我在表格中显示此值

<div class="container text-center text-middle" ng-controller='MainController'>
    <table class="table" ng-repeat="result in results">
        <tbody>
            <tr ng-class="satus">
                <td><a class="media-left" href="#">
                    <img ng-src={{result.logo}} alt="image" class="img-circle img-middle " width='50px'> </a></td>
                <td>
                    <h4 class="media-heading">{{result.name}} <span class="label"><p>{{result.off}}</p></span></h4>
                </td>
                <td><h4>{{result.status}}</h4></td>
            </tr>
        </tbody>
    </table>
</div>

表达式 result.off 仅显示列表中的最后一个用户状态

尝试在

for - 循环中移动result变量

当你做result = data;你只是覆盖值并推送它。

生成的数组是同一对象的列表

变量结果空对象应在循环启动后实现

所以它可以在循环内迭代,否则值将被覆盖

channels.forEach(function(channel) {
   $http.jsonp(url + channel + '?callback=JSON_CALLBACK').success(function(data) {
       var result = {};