Strange behaviour with JQuery and Console.log()

Question

I wrote a little JavaScript, which behaviour is unexplainable for me.

var allPois = [];
$.getJSON( "pois.json", function( data ) {
    $.each( data, function( i, poi ) {
        allPois[poi.id] = poi;
    });
    console.log(allPois["abc"]);
});

I basically get a JSON-File and then put all the existing entrys into the 'allPois' variable.
This example works. It displays the object in the console without any problems as expected. But the next one doesn't.

var allPois = [];
$.getJSON( "pois.json", function( data ) {
    $.each( data, function( i, poi ) {
        allPois[poi.id] = poi;
    });
});
console.log(allPois["abc"]);

Notice the position of the console.log()-statement. The console displays 'undefined'. I tested it with Firefox and Chrome. What is the problem here?

Thank you very much!

zuris57

Answer 1

$.getJSON is asynchronous; the execution of the containing function doesn't stop and wait for the Ajax request to complete by default. That's why the callback exists – it's called back when you can actually use the request's response.

It really looks like you should be doing this, by the way:

var allPois = {}; // Object, not array

$.getJSON( "pois.json", function( data ) {
    $.each( data, function( i, poi ) {
        allPois[poi.id] = poi;
    });

    console.log(allPois.abc);
});

Answer 2

getJSON is an AJAX function. The first A in AJAX stands for "Asynchronous". As a general rule, if a function takes a callback, then anything that relies on the result MUST be in that callback.