Twitch TV API JSON Issue

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);
}