jQuery $.each scope

Question

I've checked all of the available questions and I understand that there are some oddities when dealing with jQuery's $.each loops. I can't seem to get why a variable declared outside of that scope, but initialized within it would be lost as well. I'm not dealing with the DOM at the moment, just using getJSON to pull some data in and hand it off to other functions for later use.

This is all I'm trying to do, and am completely baffled.

function getJSONData(){
    var ar = []; 

    $.getJSON('pathto.json', function(data){
            $.each(data, function(k,v){
            ar.push(k);   // lots of data in ar
        });     
    });

    return ar;  // ar is empty again.
}

Is there a clue for the clueless here? I've tried every permutation of 'this' I can think of, and initializing ar within the getJSON loop.

Many thanks!

Answer 1

getJSON is asynchronous so the function will return straight away before ar is populated you need to do something like this:

function getJSONData(callback){
    $.getJSON('pathto.json', function(data){
        var ar = []; 

        $.each(data, function(k,v){
            ar.push(k);   // lots of data in ar
        });   

        callback(ar);
    });
}

getJSONData(function(ar) {
    console.log(ar);
});