for variable within .getJSON displayed wrong

Question

I have the following code (javascript/jQuery)

$(function(){
    for(var i=0;i<3;i++){

        $.getJSON("https://api.twitch.tv/kraken/streams/esl_csgo", function(data){
            console.log(i);
            console.log(data);
        });
    }
});

console log:

3
Object { stream: Object, _links: Object }
3
Object { stream: Object, _links: Object }
3
Object { stream: Object, _links: Object }

isn't it true, that console.log(i); should log 0 in the first loop, 1 in the second and 2 in the third? But somehow it always returns 3 :(

score 1 · Accepted Answer · answered Aug 14 '16 at 17:41

1

Try this

$(function(){
    for(var i=0;i<3;i++){
        (function (index) {
            $.getJSON("https://api.twitch.tv/kraken/streams/esl_csgo", function(data) {
                console.log(index);
                console.log(data);
            });
        })(i)
    }
});

answered Aug 14 '16 at 17:41

Akshay Khandelwal

1,570
11
19

This happens as the for loop executes completely before AJAX gets triggered and the state is maintained in the code for the variable **i**. Using closures and anonymous function to maintain the state of i during the execution of the for loop. – Akshay Khandelwal Aug 14 '16 at 17:43
thank you! it worked perfectly even tho I don't understand what you did. How is this procedure called ; is there literature about this? – orly Aug 14 '16 at 17:49
@orly Read the first link in the comments under your question. – Sebastian Simon Aug 14 '16 at 17:49

score 1 · Answer 2 · answered Aug 14 '16 at 17:53

If you are using ecma6 then you can use let to avoid closure issue. It create block scoping.

$(function() {
    for (let i = 0; i < 3; i++) {

        $.getJSON("https://api.twitch.tv/kraken/streams/esl_csgo", function(data) {
            console.log(i);
            console.log(data);
        });
    }
});

otherwise,You can use IIFE

$(function() {

    for (var i = 0; i < 3; i++) {

        (function(i) {

            $.getJSON("https://api.twitch.tv/kraken/streams/esl_csgo", function(data) {
                console.log(i);
                console.log(data);
            });

        })(i)

    }
});

Similary,you can use bind.

Jasmin Kurtic · Answer 3 · 2016-08-14T17:53:02.113

0

Can you display result in $.getJson success?

 $(function(){
            $.getJSON("https://api.twitch.tv/kraken/streams/esl_csgo", function(data){
              for(var i=0;i<3;i++){
                console.log(i);
                console.log(data[i]);
               }
            });
        });

Your i=3 because your loop does not wait $.getJson success. It is working and increment values without delay.

edited Aug 14 '16 at 17:53

answered Aug 14 '16 at 17:46

Jasmin Kurtic

141
12

score -2 · Answer 4 · answered Aug 14 '16 at 17:50

-2

Try This

    $.ajaxSetup({
        async: false
    });

    $(function(){
    for(var i=0;i<3;i++){
        $.getJSON("https://api.twitch.tv/kraken/streams/esl_csgo", function(data){
            console.log(i);
            console.log(data);
        });
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

answered Aug 14 '16 at 17:50

Parithiban

1,656
11
16

He can "try this", but he should never use it. Making these Ajax requests synchronous is not necessary (at least in this case), and it may freeze the webpage while waiting for the responses. – blex Aug 14 '16 at 17:53

for variable within .getJSON displayed wrong

4 Answers4

Linked