Javascript数组访问外部函数

Question

I'm trying to get json data with $.getJSON and it's working fine. This is my code:

$(document).ready(function(){
    var MainArray = new Array();
    $.getJSON('check-location.php?onload=true', function(result) {
        $.each(result, function(i){
            MainArray[i] = result[i].CountryName;
        });
    });

    $(".drop-down").append("<div>" + MainArray[0] + "</div>");
});

I'm trying to assign it to array for later usage, but when I try to access it and display it I get undefined .

I get all the data for sure, but when I assign it to MainArray I cant access it outside the $.each function and I've no idea why.

Answer 1

That's because Ajax is asynchronous , you are trying to append a non-existent value:

$.getJSON('check-location.php?onload=true', function(result) {
    $.each(result, function(i){
        MainArray[i] = result[i].CountryName;
    });
    $(".drop-down").append("<div>" + MainArray[0] + "</div>");
});

Answer 2

Because $.getJSON is asynchronous, the MainArray isn't updated until the data is successfully returned.

But, the line

$(".drop-down").append("<div>" + MainArray[0] + "</div>");

will have already executed before the $.getJSON is completed...hence it is undefined .

You should move this somewhere and execute it when your data has returned, ie. in the callback

Answer 3

Like every body said, because its an asynchronous request you can turn that off (not a very good practice, but it will fix the problem)

Add this before the $.getJSON call

$.ajax({ async: "false" });