AngularJS JSONP没有将键值更新为对象

Question

我试图用//Second JSONP 回调函数更新channel.status 对象。

angular.element(document).ready(function() {
    channels = [];
    channel = {};

    followersAPI = followersAPI.replace(/theUser/, user);
    followersAPI = $sce.trustAsResourceUrl(followersAPI);

    // First JSONP
    $http.jsonp(followersAPI).then(function (response) {
        var follows = response.data.follows;

        for (var i = 0; i < follows.length; i ++) {
            var currentChannel = follows[i].channel;

            if (currentChannel.status == null) {
                currentChannel.status = "offline";
            }

            channel = {
                name: currentChannel.name,
                display_name: currentChannel.display_name,
                logo: currentChannel.logo,
                url: currentChannel.url,
                status: "loading"
            };

            streamAPI = "https://wind-bow.glitch.me/twitch-api/streams/";
            streamAPI += channel.name;
            streamAPI = $sce.trustAsResourceUrl(streamAPI);

            // Second JSONP
            $http.jsonp(streamAPI).then(function (response) {
                data = response.data;
                if (data.stream == null) {
                    channel["status"] = "offline";
                } else {
                    channel["status"] = data.stream.channel.status;
                }
            });
            channels.push(channel);
        }
    });
    $scope.channels = channels;
    console.log($scope.channels);
});

没有错误消息，但仅更新了 channels[] 数组中的最后一个 channel{} 对象。

这是channel.status 的 HTML 部分：

 <div id="channel-status" class="col-md-6">
        <a
        class="btn"
        href="{{channel.url}}"
        target="_blank">
            {{channel.status}}
        </a>
</div>

Answer 1

对于for-loop中的异步调用$http.jsonp，在它的回调中你只会得到最后定义的channel的实例。作为一个解决方案，你应该把所有关于channel的东西都移到Second JSONP中。

var currentChannel = follows[i].channel;

streamAPI = "https://wind-bow.glitch.me/twitch-api/streams/";
streamAPI += channel.name;
streamAPI = $sce.trustAsResourceUrl(streamAPI);

// Second JSONP
$http.jsonp(streamAPI).then(function (response) {
    data = response.data;
    if (currentChannel.status == null) {
        currentChannel.status = "offline";
    }

    channel = {
        name: currentChannel.name,
        display_name: currentChannel.display_name,
        logo: currentChannel.logo,
        url: currentChannel.url,
        status: "loading"
    };

    if (data.stream == null) {
        channel["status"] = "offline";
    } else {
        channel["status"] = data.stream.channel.status;
    }
    channels.push(channel);
});