JQuery, AJAX: Как я могу заполнить массив возвращением json?

Question

Я пытаюсь следовать коду, но в окне предупреждения отображается только «undefined». Кто-нибудь знает, как я могу заполнить массив за пределами .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);
        }
    });

}

Answer 1

У вас есть две проблемы:

1. Ajax-вызовы асинхронны.Когда alert выполняется, массив еще не заполнен (вызов Ajax еще не возвращен).
2. Массив reviewArray не находится ни в одной (родительской) области getReviews (т.е. недоступениз этой функции).

Поместите alert в обратный вызов:

$(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);
        },
        /*...*/
   });
}

Если вы хотите сделать это с объявлением reviewArray заранее, вы также должны определитьgetReviews в обратном вызове ready:

$(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();
            },
            /*...*/
       });
    }
}); 

Но в этом случае реальный поток вашего приложения может быть более запутанным.

Answer 2

Попробуйте это:

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

}