Setting the Results of a jQuery Ajax Request to a Global Variable

Question

I'm trying to set the results of an ajax request so that it is available globally throughout my code. I originally tried just wrapping the request in a function, returning the data and then setting a global variable to that function call, but it just returned as undefined. I have no idea how to proceed.

var myId = getMyId();

getMyId();
function getMyId(){
    $.ajax({
        url: '/who_am_i',
        method: 'GET',
        dataType: 'json',
        success: function(data) {
            return data;
        }
    });
}
console.log(myId);

If you need code to understand my question, The code above does not work. I'm trying to find one that does

without code no one can help you – Mohamed-Yousef Jun 09 '15 at 16:04 — Mohamed-Yousef, Jun 09 '15 at 16:04
I updated my response with the code you requested. – Jun 09 '15 at 16:12 — , Jun 09 '15 at 16:12

Juank · Answer 1 · 2015-06-09T16:18:37.087

1

var myId;

function getMyId(){
    $.ajax({
        url: '/who_am_i',
        method: 'GET',
        dataType: 'json',
        success: function(data) {
            // you dont return vars from a async callback, from here you can access the global scope like this
            myId = data;
        }
    });
}

getMyId();  // execute it

You can use the myId var, only after the callback has finished. So perhaps it would be better to call a function so you have more control of the execution flow.

var myId;

function getMyId(){
    $.ajax({
        url: '/who_am_i',
        method: 'GET',
        dataType: 'json',
        success: function(data) {
            init(data);
        }
    });
}

function init(data){
    myId = data;
    // do your stuff here to guarantee that myId is populated
}

getMyId();  // execute it

Sorry to be so verbose, but even better:

var myId;

function getMyId(callback){
    $.ajax({
        url: '/who_am_i',
        method: 'GET',
        dataType: 'json',
        success: callback
    });
}

function init(data){
    myId = data;
    // do your stuff here to guarantee that myId is populated
}

getMyId(init);  // execute it

Several ways to achieve the same result should help others understand how data flows in async calls.

edited Jun 09 '15 at 16:18

answered Jun 09 '15 at 16:11

Juank

6,096
1
28
28

I tried both examples, and fired getMyId(); then console logged myId afterwards and it was *undefined*. – Jun 09 '15 at 16:18
did you log inside the "success" function ? – 4nti Jun 09 '15 at 16:19
@Allan Check on the network tab on the web inspector (or call the url on the browser) to see what the response from that ajax call is. Perhaps calling '/who_am_i' is returning a non json response or an empty string. – Juank Jun 09 '15 at 16:20
Yeah, this definitely works inside the function but not globally. Is there any way to make this variable available globally? I'll try returning it from the other function – Jun 09 '15 at 16:22
Then there must be a var collision or some other namespace protecting it. Try changing the name and forcing it to the window. Declare it like this: window.myCoolGlobalVar; and inside the callback assign it like this: window.myCoolGlobalVar = data; – Juank Jun 09 '15 at 16:24
@Allan: Ajax is **asynchronous**. You are trying to log the value before the callback was executed. – Felix Kling Jun 09 '15 at 16:30

Setting the Results of a jQuery Ajax Request to a Global Variable

1 Answers1