JavaScript variable empty after call of getJSON()

Question

I'm having this issue with importing data from a JSON file. I use the .getJSON function to get the data which means to work according to the console log, but once I move out of the getJSON sub function the array in data2 disappears. I've narrowed it down to this section here:

function prepData() {
    data2 = [];

    $.getJSON('http://localhost/data').done(function(json) {
        data2 =json;
        console.log(data2);
    });

    console.log(data2);
    SelectedData = data2;
    return SelectedData;
};

What might the issue be here?

Answer 1

Your function:

function(json) {
    data2 = json;
}

is executed after

console.log(data2);
SelectedData = data2;

data2 is not defined yet at that point.

---

(1) function prepData(){
(2)    data2 = []; 

(3)    $.getJSON('http://localhost/data').done(function(json) {
(4)        data2 =json;
(5)        console.log(data2);
       });

(6)    console.log(data2);
(7)    SelectedData= data2;
(8)    return SelectedData;
   };

Execution order:

1 -> 2 -> 3 -> 6 -> 7 -> 8 -> 4 -> 5

---

Common practice - Return promise instead of data:

function prepData(){
    return $.getJSON('http://localhost/data');
}

// more code here

prepData().done(function(json){
    console.log(json);
});

Take a look at these more detailed demos.
jQuery on ES5: https://jsfiddle.net/DerekL/xtmy6po0/

function timeout(n){
    // create promise
    var defer = $.Deferred();

    // resolve after n milliseconds
    setTimeout(function(){
        defer.resolve(n);
    }, n);

    // return new promise that apply custom text
    return defer.then(function(v){
        return "Resolved after " + (v/1000) + " seconds";
    });
}

timeout(3000).then(function(message){
    // will be executed after 3 seconds
    alert(message);
});

Equivalent ES7: https://jsfiddle.net/DerekL/8kLknbne/

async function timeout(n){
    // create timer
    let timer = () => new Promise(resolve => setTimeout(() => resolve(n), n));
    // return message
    return "Resolved after " + (await timer()/1000) + " seconds";
}

// call
timeout(3000).then(alert);