CODEWITHSUNDEEP
javascriptjqueryajaxjson
Martijn Mellens
Martijn Mellens

Reputation: 545

$ajax request cannot save into array (undefined)

i've made this function:

    function fetchGeo(){

var geoInfo = new Array();
 var counter = 0;


  $.ajax({
  url: 'www.URL.com/req.php',
  dataType: 'json',
  data: 'action=load',
   success: function(data){
   //console.log(data);
   $.each(data, function(i,geo){

    geoInfo[i] = new Array(geo.lat,geo.long,geo.time);
  //console.log(geoInfo);  
   });
   return geoInfo;
  }
});
}


var geoInfo = fetchGeo();

Every time i execute this function i can't get the data into a var somewhere else in the script.

I've already found this one, but that's a fail for me too: Wait for .each() .getJSON request to finish before executing a callback

Upvotes: 0

Views: 2711

Answers (5)

Guffa
Guffa

Reputation: 700592

That's because you are not returning anything from the fetchGeo function, you are returning it from the anonymous success handler, and that happens after the fetchGeo function ends.

Use a callback to handle the result:

function fetchGeo(callback) {
  $.ajax({
    url: 'www.URL.com/req.php',
    dataType: 'json',
    data: 'action=load',
    success: function(data){
      var geoInfo = [];
      $.each(data, function(i,geo){
        geoInfo.push([geo.lat,geo.long,geo.time]);
      });
      callback(geoInfo);
    }
  });
}

fetchGeo(function(geoInfo){
  // here you can use the data
});

Upvotes: 1

jabclab
jabclab

Reputation: 15042

Something like this should help:

$.ajax({
    ...
    success: function (data) {
        var geoInfo = [];
        $.each(data, function (i, geo) {
            geoInfo.push([geo.lat, geo.long, geo.time]);
        });
        // Call the the function which relies on `geoInfo`
        testFunction(geoInfo);
    }
    ...
});

function testFunction(geoArr) {
    // 'geoArr' is available for processing
}

Upvotes: 0

RvdK
RvdK

Reputation: 19800

The things called on success are asynchronius (hence the name AJAX). This means that the geoInfo array is not available. If you bring it out of the scope to global level it will work.

var geoInfo = new Array();
function fetchGeo() {
    var counter = 0;
    $.ajax({
        url: 'www.URL.com/req.php',
        dataType: 'json',
        data: 'action=load',
        success: function(data){
            //console.log(data);
            $.each(data, function(i,geo){
                geoInfo[i] = new Array(geo.lat,geo.long,geo.time);
                //console.log(geoInfo);  
            });
        }
    });
}

fetchGeo();

Upvotes: 0

ShankarSangoli
ShankarSangoli

Reputation: 69915

ajax is async by nature. Before you return from the function ajax has not finished executing the request so whatever you are returning is an empty array.

You can try something like this by declaring geoInfo as a global variable or in the outerscope of the function where you can access it.

var geoInfo = new Array();

function fetchGeo(){

 var counter = 0;


  $.ajax({
  url: 'www.URL.com/req.php',
  dataType: 'json',
  data: 'action=load',
   success: function(data){
   //console.log(data);
   $.each(data, function(i,geo){

    geoInfo[i] = new Array(geo.lat,geo.long,geo.time);
    //console.log(geoInfo);  
   });
  }
});
}


fetchGeo();

Upvotes: 0

Jim H.
Jim H.

Reputation: 5579

The scope of the geoInfo array is local to the fetchGeo function. The anonymous function created in your .each cannot see that array. Move the geoInfo array to a higher scope, such as outside the fetchGeo function.

Upvotes: 0

Related Questions