getJSON变量返回未定义

Question

I don't know why 'streamName[i]' inside my getJSON is returning 'undefined'. Everything inside it returns the correct values but only the streamName one return the undefined

 var streamName = ['LCK1', 'ryan_clark', 'syndicate', 'riotgames', 'esl_csgo', 'Nightblue3', 'summit1g', 'imaqtpie', 'sodapoppin', 'captainsparklez']; var nullLogo = "https://dummyimage.com/50x50/ecf0e7/5c5457.jpg&text=0x3F"; var name; for (var i = 0; i < streamName.length; i++) { var url = 'https://api.twitch.tv/kraken/streams/' + streamName[i] + '?callback=?'; $.getJSON(url, function(data) { console.log(name); if (data.stream == null) { $('.streamersList').append('<div> <div class="logo"> <img src=' + nullLogo + '></div> <div class="nameStreamer">' + streamName[i] + '</div> <div class="state"> Offline </div></div>'); } else { $('.streamersList').append('<div> <div class="logo"> <img src=' + data.stream.channel.logo + '></div> <div class="nameStreamer">' + streamName[i] + '</div> <div class="state">' + data.stream.channel.game + ' </div></div>'); } }); } 

Answer 1

Because $.getJSON is an asynchronous function, by the time the callback runs, i will have completed the loop. Since the loop breaks when i is greater than or equal to the length of streamName , i will be trying to access an element in streamName past the end of the array, which is undefined .

The reason i is, in this case, 10 inside every instance of the callback is because of the way scoping works in JavaScript. As far as the code is aware, i is declared at the top of the function along with streamName , nullLogo , and name . While iterating through the loop, the value of i is changed and that change is visible everywhere inside the function, including inside the callbacks, which have not run yet. By the time they do run, i will be 10 because it reached the end of the loop, and that is the value the callbacks will use.

One way to make sure you are getting the correct value for i inside the $.getJSON function is to pass i as a parameter to an immediately-invoked function. This will effectively bind the current value of i to the parameter index , so using index to get an element out of the array will have the correct value based on the iteration of the loop.

for (var i = 0; i < streamName.length; i++) {
    // note how i can be used here because this is synchronous, aka happening right now
    var url = 'https://api.twitch.tv/kraken/streams/' + streamName[i] + '?callback=?';

    (function(index) {
        $.getJSON(url, function(data) {
            // this is asynchronous (happens in the future), so i will have a different
            // value by the time it is called, but index will have the correct value
            console.log(name);
            if (data.stream == null) {
                $('.streamersList').append('<div> <div class="logo"> <img src='
                    + nullLogo
                    + '></div> <div class="nameStreamer">'
                    + streamName[index]
                    + '</div> <div class="state"> Offline </div></div>');
            } else {
                $('.streamersList').append('<div> <div class="logo"> <img src='
                    + data.stream.channel.logo
                    + '></div> <div class="nameStreamer">'
                    + streamName[index]
                    + '</div> <div class="state">'
                    + data.stream.channel.game
                    + ' </div></div>');
            }
        });
    })(i);
}

Answer 2

$.getJSON is an async function. Thereby, when the function callback happens, the loop has already looped through all iterations of i. So i's value in your case is streamName.lenghth Which makes streamName[i] undefined

I would avoid using an index in a callback like this. What you'll need to use is an immediately invoked function express(IIFE) Checkout this other stackoverflow post. How to access index variable in a jquery getJson call ($.getJson) during a loop?