Access variables/data inside jQuery/AJAX request?

Question

var links = [];

function getFeed() {
    $.getJSON("http://www.reddit.com/.json?jsonp=?", function (data) {
        $.each(data.data.children, function (i, item) {
            var url = item.data.url;
                links.push(url);
        });

    alert("Inside request: " + links.length);

    });
}

getFeed();

alert("Outside request: " + links.length);

Result:

Outside request: 0
Inside request: 25

Since the request seems to be asynchronous, how can I revise my code to use the data from the requests synchronously?

I apologize if I'm missing something obvious here...

just wrap the code you need to execute inside of the AJAX callback. — Saturnix
– Saturnix, Commented Jul 15, 2013 at 22:30

arknave · Accepted Answer · 2013-07-15 22:31:20Z

1

getJSON is an asynchronous function. The only reliable way to access the data is inside the function scope. Whatever you need to do with links can be done inside the function, right?

answered Jul 15, 2013 at 22:31

arknave

6131 gold badge6 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

turnt · Accepted Answer · 2013-07-15 22:31:45Z

1

Add a callback to getFeed().

var links = [];

function getFeed(callback) {
    $.getJSON("http://www.reddit.com/.json?jsonp=?", function (data) {
        $.each(data.data.children, function (i, item) {
            var url = item.data.url;
                links.push(url);
        });

    alert("Inside request: " + links.length);
    callback();
    });
}

getFeed(function(){

    alert("Outside request: " + links.length);

);

answered Jul 15, 2013 at 22:31

turnt

3,2535 gold badges27 silver badges41 bronze badges

Comments

Adam Jenkins · Accepted Answer · 2013-07-15 22:32:34Z

Because AJAX is asynchronous the alert in your above code is going to get fired immediately after getFeed has finished executing.

The thing is, getFeed doesn't wait for $.getJSON to return a response to finish executing, it sets up the AJAX request, sends it off, and finishes executing immediately and it's highly unlikely that by that time, the server has responded to the $.getJSON request.

This is why we use callbacks (look at the function declaration in your $.getJSON call) in asynchronous programming - we can't be 100% sure when the response is done, but we can attach a callback so that whenever the response is done, we can then perform the necessary operations.

In short, you need to place things that depend on your response to execute either in your callback, or dependent on your callback firing.

Blender · Accepted Answer · 2013-07-15 22:35:31Z

1

Since it's a JSONP request, you can't really do that. JSONP requests are made by creating <script> tags that execute a global callback function with the JSON as an argument. They're not regular AJAX requests, but jQuery makes them look like that.

It'll be easier to just use callbacks:

function getFeed() {
    return $.getJSON("http://www.reddit.com/.json?jsonp=?").pipe(function(data) {
        return $.map(data.data.children, function(item) {
            return item.data.url;
        });
    });
}

getFeed().done(function(links) {
    console.log(links)
});

answered Jul 15, 2013 at 22:35

Blender

300k55 gold badges462 silver badges511 bronze badges

Collectives™ on Stack Overflow

Access variables/data inside jQuery/AJAX request?

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related