Scope variable in ajax call

Question

Why the final console log is undefined?Variable time has a global scope and ajax call is async.

This is my code:

var time;
$.ajax({
    async:"false",
    type: 'GET',
    url: "http://www.timeapi.org/utc/now.json",
    success: function(data) {
        console.log(data);  
        time=data;
    },
    error: function(data) {
      console.log("ko");
    }
});
     
console.log(time);

I am not sure: Will you be able to connect to an external URL with `ajax` in `get`-mode? Does not browser security restrict access to local URLs only? — Carsten Massmann, Aug 09 '13 at 15:04
@cars10 - check out http://stackoverflow.com/questions/3506208/jquery-ajax-cross-domain — Eric Hotinger, Aug 09 '13 at 15:05
@EricHotinger So, as long as the sending and receiving page are hosted on `http://www.timeapi.org` it will work, otherwise `type` needs to be set to `'JSONP'`, right? — Carsten Massmann, Aug 09 '13 at 15:10

Eric Hotinger · Accepted Answer · 2013-08-09T15:30:54.317

5

Change async to the boolean false.

http://api.jquery.com/jQuery.ajax/

var time;
$.ajax({
    async: false,
    type: 'GET',
    url: "http://www.timeapi.org/utc/now.json",
    success: function (data) {
        console.log(data);
        time = data;
    },
    error: function (data) {
        console.log("ko");
    }
});

console.log(time);

Also, note that if you need to use dataType: 'jsonp' here for cross-domain, you won't be able to synchronize -- so use a promise.

var time;
$.ajax({
    dataType: 'jsonp',
    type: 'GET',
    url: "http://www.timeapi.org/utc/now.json",
    success: function (data) {
        time = data;
    },
    error: function (data) {
        console.log("ko");
    }
})
.then(function(){ // use a promise to make sure we synchronize off the jsonp
    console.log(time);    
});

See an example like this here using Q.js:

DEMO

edited Aug 09 '13 at 15:30

answered Aug 09 '13 at 15:02

Eric Hotinger

8,957
5
36
43

Just as a heads up, from the jQuery.ajax page: _Cross-domain requests and dataType: "jsonp" requests do not support synchronous operation._ – Jnatalzia Aug 09 '13 at 15:23
Added an example using Q.js to illustrate this. Thanks @Jnatalzia. – Eric Hotinger Aug 09 '13 at 15:29
... and another side remark: the `console.log(time);` will probably fire before the Ajax-success function() will have returned something. – Carsten Massmann Aug 09 '13 at 15:30
Yep, that's the purpose of the promise. Check out the updated demo. – Eric Hotinger Aug 09 '13 at 15:31
@EricHotinger Thanks for the `then()`-tip (promise), that was new to me! ;-) – Carsten Massmann Aug 09 '13 at 15:43

score 0 · Answer 2 · answered Aug 09 '13 at 15:02

0

In your code, you initialize the global variable 'time' as 'data'. Where does this data variable come from? If the data variable is not global also, when you try to use console.log(time); , it may be undefined because the data variable is undefined.

Make sure both variables are within scope to be used globally. That might work. Good luck!

answered Aug 09 '13 at 15:02

data is simply the return value of ajax call – Stefano Maglione Aug 09 '13 at 15:05
If `data` is a string you are OK. But if your server responds with a JSON object then `data` will be an object, generated for you by jQuery. And the assignment will only *point* to the object. The contents of `data` will *not be copied* into the `time`-variable, but will remain in local scope of the function. – Carsten Massmann Aug 09 '13 at 15:16

score 0 · Answer 3 · answered Aug 09 '13 at 15:33

OK, a bit contrived, but I hope it shows the point regarding scope of time and timing ...

$.ajax({
    async: false,
    dataType: 'jsonp',
    type: 'GET',
    url: "http://www.timeapi.org/utc/now.json",
    success: function (data) {
        console.log(data.dateString);
        time = data.dateString;
    },
    error: function (data) {
        console.log("ko");
    }
});

window.setTimeout("console.log('time: '+time)",3000);

JSfiddle

Scope variable in ajax call

3 Answers3

Linked

Related