$.ajax getjson array empty outside function

Question

Im trying to fill my array with data from a getjson/ajax command but for some reason the array is empty outside the function.

this is my code:

$.ajax({
    url: instagramUrl,
    dataType: 'json',
    async: false,
    data: access_parameters,
    success: function(data) {
        if(data.data.length > 0) {
            for (var key in data.data ){
                photo_container.push(data.data[key]);
                console.log(photo_container); <--- filled array
            }
        }
    }
});
console.log(photo_container); <--- empty array

I found that async: false should solve this problem but i cant make it work i allready tried getjson before this and this didnt work either.

$.ajaxSetup({
    async: false
});

doesnt work either :(

If someone knows the answer please let me know! Thanks!

Is the photo_container global or reachable outside of the ajax-call? — Adrian Forsius, Sep 30 '14 at 12:49
Where are you defining the `photo_container` array variable? — chridam, Sep 30 '14 at 12:51
outside its declared ontop above all the functions right under the — Stefan, Sep 30 '14 at 12:53
possible duplicate of [How to return the response from an Ajax call?](http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call) — pomeh, Sep 30 '14 at 12:54
This isn't a *quite* a duplicate of [How to return the response from an Ajax call?](http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call). It seems like your code *should* work with `async: false`, but if you read that question, it will help you understand a much better way to do things, without `async: false`. — apsillers, Sep 30 '14 at 13:02
Can you share your `instgramUrl`? Feel free to remove any personal information from it, but it would be helpful to see it. — apsillers, Sep 30 '14 at 13:05
here is the instagram url from the first array i got: http://instagram.com/p/tkhmgMvu6W/ the code searches for the last 5 people who used the #me in their post so its nothing personal :P — Stefan, Sep 30 '14 at 13:14

score 2 · Answer 1 · answered Sep 30 '14 at 13:02

2

You'll have to wait for the ajax call to finish before you can use the data:

function retrieveImages() {
    return $.ajax({
        url: instagramUrl,
        dataType: 'json',    
        data: access_parameters
    });
}

$(document).ready(function () {
    var photo_container = [];
    retrieveImages().done(function(data) {
        if(data.data.length > 0) {
            for (var key in data.data ){
                photo_container.push(data.data[key]);
                console.log(photo_container); <--- filled array
            }
        }
        // you can only use the data inside the done() handler,
        // when the call has completed and the data is returned
        console.log(photo_container);
    });        
});

answered Sep 30 '14 at 13:02

chridam

100,957
23
236
235

this code still ends up with a empty array outside the retrieveimages function in my console this console.log still goes before the console.log in the ajax code – Stefan Sep 30 '14 at 13:05
You can only use the data inside the done handler because the `photo_container` array will still be empty at that point outside the `retrieveImages()` function; your second call to `console.log(photo_container)` occurs immediately after the asynchronous call. Remember it is ASYNCHRONOUS, meaning it executes parallel to javascript running on your page. – chridam Sep 30 '14 at 13:17

$.ajax getjson array empty outside function

1 Answers1