Why does this code always return 0?

     var possibleMatches = new Array();
  $.getJSON('getInformation.php', function(data) {
   $.each(data, function(i){
    possibleMatches.push(data[i]);
   })
  });
  alert(possibleMatches.length);

Though I can move or add "alert(possibleMatches.length);" inside the $.each and it will output the correct number of elements.

I'm just curious as to why it the values aren't going into the array as I expected. I'm sure its a local variable vs. global variable issue, just not sure why.

Basically, what this is trying to do is fill the possibleMatches array with the data results.

thanks!

Why does this code always return 0?

     var possibleMatches = new Array();
  $.getJSON('getInformation.php', function(data) {
   $.each(data, function(i){
    possibleMatches.push(data[i]);
   })
  });
  alert(possibleMatches.length);

Though I can move or add "alert(possibleMatches.length);" inside the $.each and it will output the correct number of elements.

I'm just curious as to why it the values aren't going into the array as I expected. I'm sure its a local variable vs. global variable issue, just not sure why.

Basically, what this is trying to do is fill the possibleMatches array with the data results.

thanks!

• javascript
• jquery
• arrays

3 Answers 3

Asynchronicity. The line alert(possibleMatches.length); executes before the success callback for $.getJSON() executes.

So, to have your alert report accurately, just move it.

var possibleMatches = new Array();
$.getJSON('getInformation.php', function(data) {
  $.each(data, function(i){
    possibleMatches.push(data[i]);
  })

  // To here
  alert(possibleMatches.length);
});
// From here

Remember, the first A in AJAX stands for "Asynchronous"

$.getJSON performs an asynchronous call, whose callback is executed on pletion of the xmlhttprequest used:

var possibleMatches = new Array(); 
$.getJSON('getInformation.php', function(data) {  // <-- this will run later 
    $.each(data, function(i){ 
        possibleMatches.push(data[i]); 
    }) 
}); 
alert(possibleMatches.length);  // this will call immediately

The jetJSON request is asynchronous, it finished after your alert runs. If you want an accruate alert, it should be in your callback for getJSON like this:

  $.getJSON('getInformation.php', function(data) {
   $.each(data, function(i){
    possibleMatches.push(data[i]);
   });
   alert(possibleMatches.length);
  });