Javascript array access outside function

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.

Just a note. Go for [] instead of new Array().

Grzegorz Kaczan
– Grzegorz Kaczan

2013-05-22 20:21:31 +00:00
Commented May 22, 2013 at 20:21 — Grzegorz Kaczan
– Grzegorz Kaczan, Commented May 22, 2013 at 20:21

Ram · Accepted Answer · 2013-05-22 20:11:13Z

6

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

edited May 22, 2013 at 20:11

answered May 22, 2013 at 20:05

Ram

145k16 gold badges174 silver badges201 bronze badges

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

Comments

Amy · Accepted Answer · 2013-05-22 20:05:56Z

3

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

answered May 22, 2013 at 20:05

Amy

7,5262 gold badges22 silver badges31 bronze badges

Comments

Sam Battat · Accepted Answer · 2014-11-20 17:46:49Z

0

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

edited Nov 20, 2014 at 17:46

answered May 22, 2013 at 20:08

Sam Battat

5,7651 gold badge22 silver badges29 bronze badges

1 Comment

Lexx Over a year ago

Thank you all for the help guys.

Collectives™ on Stack Overflow

Javascript array access outside function

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related