Variable isn't changing in for loop - JavaScript

Question

Why is this outputting each feedName as the same name (MedryBW)? I've spent a while messing around with it, can't figure it out. I want it to output the name of the feed in each iteration of the loop rather than repeating the same one over and over again. Thanks everyone.

var feeds = ["Towellie", "TrumpSC", "TeamSp00ky", "TwitchPlaysPokemon", "Widgitybear", "AriaBlarg", "TheMexicanRunner", "OPNerd", "rabbitbong", "Wingsofdeath", "MedryBW"];

$(document).ready(function(){
    for(x = 0; x < feeds.length; x++){
        var feedName = feeds[x];
        $.getJSON('https://api.twitch.tv/kraken/streams/' + feeds[x] + '?callback=?', function(data) {
            if(data.stream === null){
                $('#feeds').append("<p>" + feedName + " is offline </p>");
            } else {
                $('#feeds').append("<p>" + feedName + " is streaming "  (data.stream.game) + "/<p>");
            }
        });
    }
});

Alex Kapustin · Accepted Answer · 2016-04-13 04:33:09Z

Because callback function runs much later, not in the loop, and it just gets variable value after loop has finished (last value), use bind function to pass variable to the function

var feeds = ["Towellie", "TrumpSC", "TeamSp00ky", "TwitchPlaysPokemon", "Widgitybear", "AriaBlarg", "TheMexicanRunner", "OPNerd", "rabbitbong", "Wingsofdeath", "MedryBW"];

$(document).ready(function() {
    for(x = 0; x < feeds.length; x++){
        var feedName = feeds[x];
        $.getJSON('https://api.twitch.tv/kraken/streams/' + feeds[x] + '?callback=?', function(feedName, data) {
            if (data.stream === null) {
                $('#feeds').append("<p>" + feedName + " is offline </p>");
            }else{
                $('#feeds').append("<p>" + feedName + " is streaming " + (data.stream.game) + "/<p>");
            }
        }.bind(this, feedName));
    }
});

LazyDeveloper · Accepted Answer · 2016-04-13 04:32:58Z

As you have written Ajax in for loop , The success callback executes after for loop has executed

var feeds = ["Towellie", "TrumpSC", "TeamSp00ky", "TwitchPlaysPokemon", "Widgitybear", "AriaBlarg", "TheMexicanRunner", "OPNerd", "rabbitbong", "Wingsofdeath", "MedryBW"];

$(document).ready(function() {
  feeds.forEach(function(feedName) {
    $.getJSON('https://api.twitch.tv/kraken/streams/' + feedName + '?callback=?', function(data) {
      if (data.stream === null) {
        $('#feeds').append("<p>" + feedName + " is offline </p>");
      } else {
        $('#feeds').append("<p>" + feedName + " is streaming " + (data.stream.game) + "/<p>");
      }
    });

  });
})

THe Above change will work

Laxminarayan · Accepted Answer · 2016-04-13 04:37:28Z

You can achieve this by.

var feeds = ["Towellie", "TrumpSC", "TeamSp00ky", "TwitchPlaysPokemon", "Widgitybear", "AriaBlarg", "TheMexicanRunner", "OPNerd", "rabbitbong", "Wingsofdeath", "MedryBW"];

        $(document).ready(function(){
        var divText;
        for(x = 0; x < feeds.length; x++){
            var feedName = feeds[x];
            $.getJSON('https://api.twitch.tv/kraken/streams/' + feeds[x] + '?callback=?', function(data) {
          if(data.stream === null){
         divText = divText + '<p>'+feedName+' is offline </p>';
          }else{
         divText = divText + '<p>'+feedName+' is streaming '+(data.stream.game) +'</p>'
        }
        });
        }
     $('#feeds').append(divText); 
     //or $('#feeds').html(divText); 

        })

Collectives™ on Stack Overflow

Variable isn't changing in for loop - JavaScript

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related