Return data from jQuery.post AJAX call?

Question

Hi I'm calling this function:

function getCoordenadas()
{
    var coordenadas = new Array();
    $.post(
        '<?=$this->baseUrl('user/parse-kml')?>', 
        { kmlName: "esta_chica.kml"},
        function(jsonCoord) {
            jQuery.each(jsonCoord, function(i, val) {
                var latlng = val.split(',');
                coordenadas.push(new google.maps.LatLng(latlng[0], latlng[1]));
            });
        },
        'json'
    );  
    return coordenadas;
}

like this:

$(document).ready(function(){
    $('.caller').click(function() {
        console.log(getCoordenadas());
    });
});

So when you click .caller it calls the function gets the data correctly populates the array, but console.log(getCoordenadas()); outputs [].

If I move the array declaration (var coordenadas = new Array();) from the function scope to make it global, when I click .caller for the first time console.log(getCoordenadas()); outputs [], but the second time it outputs the array correctly. Any ideas?

Thanks in advance

http://stackoverflow.com/questions/388436/jquery-ajax-return-value , http://stackoverflow.com/questions/2195161/how-to-return-an-array-from-jquery-ajax-success-function-properly — , Mar 28 '12 at 11:01
possible duplicate of [How does one return data to the original caller function in Javascript?](http://stackoverflow.com/questions/1094716/how-does-one-return-data-to-the-original-caller-function-in-javascript) — , Mar 28 '12 at 11:01

score 3 · Accepted Answer · answered Mar 28 '12 at 10:58

This function works asynchronously. AJAX post is fired and then function returns without waiting for AJAX call to complete. That's why coordenadas array is empty.

When you make it global, the first time it's still empty and by the second time you try, the ajax returned and populated the array. You should restructure your code to use a callback. Something like this:

// definition
function getCoordenadas(callback)
{
    var coordenadas = new Array();
    $.post(
        '<?=$this->baseUrl('user/parse-kml')?>', 
        { kmlName: "esta_chica.kml"},
        function(jsonCoord) {
            jQuery.each(jsonCoord, function(i, val) {
                var latlng = val.split(',');
                coordenadas.push(new google.maps.LatLng(latlng[0], latlng[1]));
            });
            callback(coordenadas);
        },
        'json'
    );  
}

// usage
$(document).ready(function(){
    $('.caller').click(function() {
      getCoordenadas(function(coord) {
        console.log(coord);
      })
    });
});

Jajaja, I suspected that. Thanks for the confirmation! – lloiacono Mar 28 '12 at 11:03 — lloiacono, Mar 28 '12 at 11:03

score 1 · Answer 2 · answered Mar 28 '12 at 12:01

If you need a complete function, you can't use $.post functions;

you will need to call the $.ajax function directly. You pass an options object that can have "success", "error" and "complete" callbacks.

Instead of this:

$.post(<?=$this->baseUrl('user/parse-kml')?>, parameters, function);

you would use this:

$.ajax({
    url: <?=$this->baseUrl('user/parse-kml')?>,
    type: "POST",
    data: parameters,
    success: successFunction,
    error: errorFunction,
    complete: completefunction

});

There are lots of other options available too. The documentation lists all the options available.

Thanks, this aproach is better for my needs – lloiacono Mar 28 '12 at 16:18 — lloiacono, Mar 28 '12 at 16:18

Return data from jQuery.post AJAX call?

2 Answers2

Linked