Twitch TV API JSON问题

Question

我使用Twitch API。 如果流媒体流我使用属性“流”。 但是，如果他没有在流媒体播放，那么我需要参考其他链接。 然后，我再次转到getJSON的功能，并在此传递必要的API链接。 我正在和她一起工作。 但是，循环无法正常工作。 它会将最后一个流光带出“通道”数组，但所有不流光的流带都应移走。 我不明白是什么问题。 救命...

JSFiddle： https ：//jsfiddle.net/e7gLL25y/

JS Code:

var getJSON = function(url, callback) {
    var xhr = new XMLHttpRequest();
    xhr.open("GET", url, true);
    xhr.onload = function() {
        if(xhr.readyState == 4 && xhr.status == "200") {
            callback(JSON.parse(xhr.responseText));
        }
    };
    xhr.send();
};

var channels = ["summit1g", "esl_RuHub_CSGO", "Starladder1", "Senpai_Frozen", "tehvivalazz", "ESL_CSGO"];
var client_id = "hx3dea4ifwensxffoe8iwvekwvksnx";
var section = document.getElementById("main-section");

var streamer = [];
for(var i = 0; i < channels.length; i++) {

    var url_channels = "https://api.twitch.tv/kraken/channels/" + channels[i] + "?client_id=" + client_id;
    var url_streams = "https://api.twitch.tv/kraken/streams/" + channels[i] + "?client_id=" + client_id;

    getJSON(url_streams, function(response) {
        if( response["stream"] !== null ) {
            streamer[i] = document.createElement("div");
            streamer[i].className = "streamer";
            streamer[i].innerHTML = "<a target='_blank' href='" + response.stream.channel["url"] + 
                                        "'><img id='streamer-image' src='" + 
                                        response.stream.channel["logo"] + 
                                        "' alt='Av' /><h2 id='streamer-name'>" + 
                                        response.stream.channel["name"] + 
                                        "</h2><p id='stream-status'>" + 
                                        response.stream["game"] + "</p></a>";
            section.appendChild(streamer[i]);
        } else {
            getJSON(url_channels, function(r) {
                streamer[i] = document.createElement("div");
                streamer[i].className = "streamer";
                streamer[i].innerHTML = "<a target='_blank' href='" + r["url"] + 
                                            "'><img id='streamer-image' src='" + 
                                            r["logo"] + 
                                            "' alt='Av' /><h2 id='streamer-name'>" + 
                                            r["name"] + 
                                            "</h2><p id='stream-status'>Offline</p></a>";
                section.appendChild(streamer[i]);
            });
        }
    });

}

Answer 1

您对JavaScript上下文有一个普遍的误解。

请参阅我的答案以查看有关此问题的详细信息： https : //stackoverflow.com/a/42283571/1525495

简单来说，在循环所有数组之后将调用getJSON响应，因此i将成为所有响应中的最后一个索引。 您必须创建另一个上下文来保留i数，因此不会增加。

for(var i = 0; i < channels.length; i++) {

    var url_channels = "https://api.twitch.tv/kraken/channels/" + channels[i] + "?client_id=" + client_id;
    var url_streams = "https://api.twitch.tv/kraken/streams/" + channels[i] + "?client_id=" + client_id;
    (function(i) {
        // i will not be changed by the external loop as is in another context
        getJSON(url_streams, function(response) {
            // Thingy things...
        });
    })(i);

}