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

2 Answers 2

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);
        }
    });

}