Why is my for loop not working in my JSON function?

Question

Hey Guys im new at coding and working right now on a Twitch Viewer. (FreeCodeCamp)

Im able to get information from the JSON file and show it through my html code. But my problem is that i cant get the names from my "gamer" array.

Why is the for loop not working in the json function?

Thank you very much for your help!

var gamer = ["OgamingSC2","ESL_SC2"];

for(i=0;i<(2);i++){
  
$.getJSON('https://api.twitch.tv/kraken/streams/'+gamer[i]+'/?callback=?', function(json) {
  $('.list').append("<b>Name: " + gamer[i] + "</b><br>");
  var logo = json.stream.channel.logo;
  
  $('.list').append("Game: " + json.stream.channel.game + "<br>");
  $('.list').append("Status: " + json.stream.channel.status + "<br>");
  $('.list').append("Logo: " + "<img src=" + logo + ">" + "<br><br><br>");
  console.log(json);
});}

img {
  width: 5em;
  border-radius: 10px;
}

<head><script src="http://code.jquery.com/jquery-1.11.2.min.js"></script> </head>
<body>
  <b>Twitch.tv JSON API</b> </br>
<div class="list"></div>
</body>

because `$.json` is asynchronous, and `i` is not what you think it is once you hit the `$.json` callback ... @A.J `i` will still be wrong :p — Jaromanda X, Aug 25 '16 at 06:15
Possible duplicate of [JavaScript closure inside loops – simple practical example](http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example) — Jaromanda X, Aug 25 '16 at 06:19
@aisen have added a working code snippet here: http://stackoverflow.com/a/39137979/1409180 — nikjohn, Aug 25 '16 at 06:43

nikjohn · Accepted Answer · 2016-08-25T06:43:12.443

What happens here is the $.getJson is an asynchronous call, which means that it will execute only after all of the sync operations are executed. So, the for loop runs twice, and two getJSON callback functions are added to the function stack.

Now as Javascript has lexical or functional scope, the variable i lives on in the global scope as 2 (as the final i++ also has executed).

Next, the callback functions are executed one by one off of the function stack. But alas, your variable i is now 2! Now the callback functions would only see gamer[2] which doesn't exist and this throws an undefined

If you add a console.log(i) to your $.getJSON, you'll see that it outputs only 2 two times.

Why don't you try this:

    var gamer = ["OgamingSC2","ESL_SC2"];
    gamer.map(function(gamer) {
      loopIt(gamer);
    });

  function loopIt(gamer) {
    
 
 $.getJSON('https://api.twitch.tv/kraken/streams/'+gamer+'/?callback=?', function(json) {
      $('.list').append("<b>Name: " + gamer + "</b><br>");
      var logo = json.stream.channel.logo;
      
      $('.list').append("Game: " + json.stream.channel.game + "<br>");
      $('.list').append("Status: " + json.stream.channel.status + "<br>");
      $('.list').append("Logo: " + "<img src=" + logo + ">" + "<br><br><br>");
    });

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head><script src="http://code.jquery.com/jquery-1.11.2.min.js"></script> </head>
<body>
  <b>Twitch.tv JSON API</b> </br>
<div class="list"></div>
</body>

Thank you for your really deep explanation! Now i understand whats happening! Thank you very much!!! — aisen, Aug 26 '16 at 05:14

score 0 · Answer 2 · answered Aug 25 '16 at 06:25

i think it json gives nothing because you put callback=? when you pass ? in call back variable it take value with ? and gives nothing. so just put callback= .dont give any values and try again. and just alert json variable in function. you will know value is coming or not. i dont found nothing wrong with loop and json link.

score 0 · Answer 3 · answered Aug 25 '16 at 06:27

For this types of server call in for loop , you can use custom loop.

Like this, https://jsfiddle.net/s8eLhxpx/

    var gamer = ["OgamingSC2","ESL_SC2"];

     var initCounter = 0;
     callServerData()

     function callServerData(){
        $.getJSON('https://api.twitch.tv/kraken/streams/'+gamer[ initCounter ]+'/?callback=?', function(json) {
    $('.list').append("<b>Name: " + gamer[ initCounter ] + "</b><br>");
    var logo = json.stream.channel.logo;

     $('.list').append("Game: " + json.stream.channel.game + "<br>");
     $('.list').append("Status: " + json.stream.channel.status + "<br>");
     $('.list').append("Logo: " + "<img src=" + logo + ">" + "<br><br><br>");
      console.log(json);
      initCounter++
      if(initCounter < gamer.length){

        callServerData();
     }

});
}

for loop not wait for server response , hence you get undefined. — Pratik Parekh, Aug 26 '16 at 09:42

Why is my for loop not working in my JSON function?

3 Answers3