Get global var from function after $.get() jQuery

Question

I have this code

var base_url = 'http://api.zxc.loc';
var questions = []; 

function get_question(){
    if(!questions.lenght){
        $.get(base_url + '/api/questions', function(data){
            questions = data;
            console.log('get_question', questions); // GOOD, return [Object, Object ... etc ... ]
        }, 'json')
    } 
    console.log('get_question_2', questions); // BAD return empty array []

    /* var question = questions[0];
    delete questions[0];
    return question; */
}

How you can see, in $.get questions variable not empty, but after $.get, questions is empty!

Why? Thanks

simple answer you can't do that because ajax requests are asynchronous — Arun P Johny, Mar 30 '14 at 13:02

score 0 · Answer 1 · answered Mar 30 '14 at 13:03

This is how AJAX works. In your code get_question_2 will be logged before get_question. Once an ajax call is made, the code proceeds past it (to get_question_2). Then one the ajax call is returned, the code inside your function (namely get_question) will be executed.

To summarize, the log with get_question_2 is being called as soon as the ajax call is finished being made and BEFORE the ajax call returns with the data.

Get global var from function after $.get() jQuery

1 Answers1