Can't access global variable in jQuery $.get within function

Question

Below is some code I'm having trouble with. Basically, I'm defining an empty array as a global variable (var playlist = []) and then trying to add elements to it within a jQuery $.get call. From what I've read on the internet, I should be able to do this! The following code gives the error: "Cannot call method 'play' of undefined". playlist[0] does get set within the function, alerting playlist[0] within the $.get call gives the expected result, but it doesn't persist outside the function.

var playlist = [];
function playArtist(artist){
  $.get('media/songs/' + artist,
    function(data){
      for (var i in data){
        playlist[i] = setSong(data[i].Resource.name,'track' + data[i].Media.id,i + 1);
      }
    $('#track-total').text(parseInt(playlist.length));
    },'json'
  );
  playlist[0].play();
}

Can anyone help?

Thanks!

Answer 1

You don't have to do any of this. I ran into the same problem with my project. what you do is make a function call inside the on success callback to reset the global variable. As long as you got asynchronous javascript set to false it will work correctly. Here is my code. Hope it helps.

 var exists;

 //function to call inside ajax callback 
 function set_exists(x){
     exists = x;
 }

  $.ajax({
     url: "check_entity_name.php",
     type: "POST",
     async: false, // set to false so order of operations is correct
     data: {entity_name : entity},
     success: function(data){
     if(data == true){
        set_exists(true);
     }
     else{
        set_exists(false);
     }
  }
});

if(exists == true){
    return true; 
}
else{
    return false;
}

Hope this helps you .

Answer 2

Chances are, playlist is getting used before $.get returns - as ajax calls are asynchronous. It works within the success callback because that gets fired once the request has completed, so it will contain the data you expect.