getJSON variable returns undefined

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

    });
}

jonhopkins · Accepted Answer · 2016-07-22 15:33:26Z

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

Community · Accepted Answer · 2017-05-23 11:44:17Z

0

$.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?

edited May 23, 2017 at 11:44

CommunityBot

11 silver badge

answered Jul 22, 2016 at 15:14

Andrew Kim

3,3714 gold badges27 silver badges45 bronze badges

Collectives™ on Stack Overflow

getJSON variable returns undefined

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related