javascript - JQuery, AJAX: How can I populate an array with a json return? - Stack Overflow

I'm trying to following code but only get "undefined" in the alert box. Anyone know how I can actually populate the array outside of the .ajax?

$(document).ready(function() {

    var reviewArray = new Array();

    getReviews();

    alert(reviewArray[0]);

});

function getReviews()
{

   $.ajax({
    type : 'GET',
    url  : 'reviewbox.php',
    dataType : 'json',
    success  : function ( data ) {

    $.each( data.reviews, function( i, itemData ) {
       reviewArray[i] = itemData.review;
    });
    },
    error    : function ( XMLHttpRequest, textStatus, errorThrown) {
        var err = "An error has occured: " + errorThrown;
        $("body").append(err);
        }
    });

}

I'm trying to following code but only get "undefined" in the alert box. Anyone know how I can actually populate the array outside of the .ajax?

$(document).ready(function() {

    var reviewArray = new Array();

    getReviews();

    alert(reviewArray[0]);

});

function getReviews()
{

   $.ajax({
    type : 'GET',
    url  : 'reviewbox.php',
    dataType : 'json',
    success  : function ( data ) {

    $.each( data.reviews, function( i, itemData ) {
       reviewArray[i] = itemData.review;
    });
    },
    error    : function ( XMLHttpRequest, textStatus, errorThrown) {
        var err = "An error has occured: " + errorThrown;
        $("body").append(err);
        }
    });

}

• javascript
• jquery
• ajax
• arrays

Share Improve this question Follow asked Dec 30, 2010 at 20:31 daveomcddaveomcd 6,5651616 gold badges8686 silver badges142142 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

You have two problems:

1. Ajax calls are asynchronous. When alert is executed, the array is not filled yet (the Ajax call did not return yet).
2. The array reviewArray is not in any (parent) scope of getReviews (i.e. not accessible from that function).

Put the alert in the callback:

$(document).ready(function() {  
    getReviews(function(reviewArray) {
         alert(reviewArray[0]);
    }); 
});

function getReviews(callback) {
    $.ajax({
        /*...*/
        success  : function (data) {
            var reviewArray = [];
            $.each( data.reviews, function( i, itemData ) {
               reviewArray[i] = itemData.review;
            });
            callback(reviewArray);
        },
        /*...*/
   });
}

If you want to do it with declaring reviewArray beforehand, you also have to define getReviews in the ready callback:

$(document).ready(function() {  
    var reviewArray = [];

    getReviews(function() {
         alert(reviewArray[0]);
    });

    function getReviews(callback) {
        $.ajax({
            /*...*/
            success  : function (data) {
                $.each( data.reviews, function( i, itemData ) {
                   reviewArray[i] = itemData.review;
                });
                callback();
            },
            /*...*/
       });
    }
}); 

But this way, the actual flow of your application might be more confusing.

Try this:

$(document).ready(function() {

    getReviews();

});

function getReviews()
{

    var reviewArray = new Array();

   $.ajax({
    type : 'GET',
    url  : 'reviewbox.php',
    dataType : 'json',
    success  : function ( data ) {

    $.each( data.reviews, function( i, itemData ) {
       reviewArray[i] = itemData.review;
    });
    alert(reviewArray[0]);
    },
    error    : function ( XMLHttpRequest, textStatus, errorThrown) {
        var err = "An error has occured: " + errorThrown;
        $("body").append(err);
        }
    });

}