JQuery, AJAX: How can I populate an array with a json return?

Question

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

}

Felix Kling · Accepted Answer · 2010-12-30 20:42:05Z

7

You have two problems:

Ajax calls are asynchronous. When alert is executed, the array is not filled yet (the Ajax call did not return yet).
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.

edited Dec 30, 2010 at 20:42

answered Dec 30, 2010 at 20:35

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

daveomcd Over a year ago

Thanks very much appreciate the explanation too! :)

NickAldwin · Accepted Answer · 2010-12-30 20:45:33Z

1

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

}

edited Dec 30, 2010 at 20:45

answered Dec 30, 2010 at 20:33

NickAldwin

11.8k12 gold badges55 silver badges68 bronze badges

Collectives™ on Stack Overflow

JQuery, AJAX: How can I populate an array with a json return?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related