Why aren's these AJAX calls updating my variables?

Question

I have the following variables ready to hold strings that are returned from the API call:

  // Variables for the Twitch user's object
  var tName = "tName";
  var tLogo = "tLogo";
  var tGame = "tGame";
  var tChannel = "tChannel";

Then I have this function which holds an AJAX call:

    function twitchInfo(user){
$.ajax({
  url: streams + user,
  success: function(response){
    if (response.stream){
      tName = response.stream.channel.display_name;
      tLogo = response.stream.channel.logo;
      tGame = response.stream.game;
      tChannel = response.stream.channel.status;
    } else {
      $.ajax({
        url: users + user,
        success: function(data){
          tName = data.display_name;
          if (data.logo) {
            tLogo = data.logo} else {tLogo = defLogo}
          tGame = "Offline";
          tChannel = " ";
        }
      })
    };        
  }
})
};

The function is being called from a loop that iterates through an array of users.

I checked the call URL's and they all return data just fine.

I wanted that data from the ajax call(s) to update the variables, but on investigating by doing a console.log(tName + tLogo ....), nothing is being updated.

Can anyone spot why? Any thoughts would be appreciated.

Thanks

edit

  $(document).ready(function() {

  //the Twitch accounts to include:
  var twitchUsers = ["OgamingSC2", "ESL_SC2", "FreeCodeCamp", "storbeck", "brunofin", "comster404", "lastUser"];
  var defLogo = "https://cdn1.iconfinder.com/data/icons/user-experience/512/user-unknown-512.png";

  //Beginning of API call
  var streams = "https://api.twitch.tv/kraken/streams/";
  var users = "https://api.twitch.tv/kraken/users/";

 //Twitch user's object which will hold the info from the API calls.
 var AccInfo=  {};

 // Variables for the Twitch user's object
 var tName = "tName";
 var tLogo = "tLogo";
 var tGame = "tGame";
 var tChannel = "tChannel";

 //Object constructor
 function twitchUser(name, logo, game, channel){
 this.name = name;
 this.logo = logo;
 this.game = game;
 this.channel = channel;
 }

 function twitchInfo(user){
 $.ajax({
 url: streams + user,
  success: function(response){
    if (response.stream){
      tName = response.stream.channel.display_name;
      tLogo = response.stream.channel.logo;
      tGame = response.stream.game;
      tChannel = response.stream.channel.status;
    } else {
      $.ajax({
        url: users + user,
        success: function(data){
          tName = data.display_name;
          if (data.logo) {
            tLogo = data.logo} else {tLogo = defLogo}
          tGame = "Offline";
          tChannel = " ";
        }
      })
    };        
    }
    })
    };

   for (p=0; p<twitchUsers.length; p++){
   twitchInfo(twitchUsers[p]);

$("#theTable").append("<tr><td class=\"theLogo\"><img src=" + AccInfo.logo + "></td><td class=\"user\"><a href=\"http://www.twitch.tv/" + AccInfo.name + "\">"+ AccInfo.name +"</td><td>"+ AccInfo.game + " " + AccInfo.channel + "</td></tr>");

console.log(twitchUsers[p] + " " + tName + " " + tLogo + " " + tGame + " " + tChannel + " ");
  }



 });

See: http://stackoverflow.com/questions/13648995/how-to-grab-return-value-from-an-ajax-call — Andrew Whitaker, Apr 15 '16 at 18:00
Because, the `console.log` will show the values before the ajax request get success. — Danny Fardy Jhonston Bermúdez, Apr 15 '16 at 18:01
The loop that calls the function also held the console.log call, right after the function was called. — smithplusplus, Apr 15 '16 at 18:17
Then as Danny commented, the `console.log()` is executed before the response was received. The linked question explains it all in detail. — Jasen, Apr 15 '16 at 18:23

score 0 · Answer 1 · answered Apr 15 '16 at 18:07

Where are those variables declared? Maybe they are out of scope. Can you provide a more complete sample?

You could also try to pass a callback to your twitchInfo function. So, instead of updating the variables within the method, you just assign the callback to the success attribute:

function twitchInfo(user, callback){
    $.ajax({
      url: streams + user,
      success: callback
    })
};

and when you call the function, just create an inline function making sure the variables that you want to update are in scope:

twitchInfo("some user", function(response) {
    if (response.stream){
          tName = response.stream.channel.display_name;
          tLogo = response.stream.channel.logo;
          tGame = response.stream.game;
          tChannel = response.stream.channel.status;
        } else {
          $.ajax({
            url: users + user,
            success: function(data){
              tName = data.display_name;
              if (data.logo) {
                tLogo = data.logo} else {tLogo = defLogo}
              tGame = "Offline";
              tChannel = " ";
            }
          })
     }
 );

I've appended my full javascript to my original question. You'll see the variables are declared at the start inside $(document).ready(function() {}. I'll give your suggestion a try as well, creating an inline function. — smithplusplus, Apr 15 '16 at 18:32

Why aren's these AJAX calls updating my variables?

1 Answers1