CODEWITHSUNDEEP
jqueryajax
Matthieu Boisjoli
Matthieu Boisjoli

Reputation: 1077

Callback in ajax call (jquery) not returning as expected

What I want to achieve is quite simple : Put the object from instagram's API in a variable so I can play wherever I want with it. This is what I have done so far :

$(document).ready(function() {
// initialize var already
var instagram_infos;

function get_instagram_feed(callback) {
    var client_id = 'f6014154300f41ec98aw8dw087e49096';
    var user_id = "1681116416";
    $.ajax({
        url: 'https://api.instagram.com/v1/users/'+user_id+'/media/recent/',
        dataType: 'jsonp',
        type: 'GET',
        data: {client_id: client_id},
        success: callback,
        error: function(data){
            console.log(data);
        }
    });
}

function callback_instagram(result) {
    instagram_infos = result;
}

get_instagram_feed(callback_instagram);

console.log(instagram_infos);
});

As you can see, I am passing a callback function from my success ajax, in my callback, I just want to put the object returning from instagram in my variable instagram_infos. Tho, this is not working, when I console.log my instagram_infos variable it says : undefined. I guess it's a problem of AJAX asynchronous call but I am not an expert to this =/ Still learning about it... How can I fix this?

Upvotes: 0

Views: 57

Answers (3)

Terry
Terry

Reputation: 66228

Remember that AJAX is asynchronous, and therefore you're outputting to the console when there is no data returned, and no values being assigned to the instagram_infos variable.

What you could do is instead of nesting your success callback within your AJAX method, you can listen on the promise object, which is natively returned by the $.ajax() method in jQuery:

$(document).ready(function() {

// Set up variables needed for AJAX call
var instagram_infos,
    client_id = 'f6014154300f41ec98aw8dw087e49096',
    user_id = '1681116416',
    get_instagram_feed = $.ajax({
        url: 'https://api.instagram.com/v1/users/'+user_id+'/media/recent/',
        dataType: 'jsonp',
        type: 'GET',
        data: { client_id: client_id }
    });

// Listen to promise object returned
get_instagram_feed
.done(function(data) {
    // When AJAX call is successful
    console.log(data);
    instagram_infos = data;
})
.fail(function(data) {
    // When AJAX call has failed
    console.log(data);
});

Note that then instagram_infos, when accessed from outside the jqXHR.done() function, will return null, but will return the correct data when done otherwise, because the .done() function waits for the AJAX call to be completed before firing, therefore binding the right values to your variable.

Upvotes: 1

Nathanael Smith
Nathanael Smith

Reputation: 3321

The issue is that AJAX will execute asynchronously. So console.log(instagram_infos); will actually run before callback_instagram.

You'll be better off using a promise. 

function get_instagram_feed() {
    var client_id = 'f6014154300f41ec98aw8dw087e49096';
    var user_id = "1681116416";
    return $.ajax({ // $.ajax will return a Promise (well really a Deferred Object)
        url: 'https://api.instagram.com/v1/users/'+user_id+'/media/recent/',
        dataType: 'jsonp',
        type: 'GET',
        data: {client_id: client_id}
    });
}

get_instagram_feed().then(function(instagram_infos) {
     // now you have whatever instagram sends back. 
}).fail(function(err) {
    // deal with error
})

jQuery Deferred

Upvotes: 2

Francisco Goldenstein
Francisco Goldenstein

Reputation: 13787

You need to consider that AJAX calls are async so you cannot expect to have a value in instagram_infos right after you call the AJAX function. You need to wait for the response of the AJAX call. You could use "promise" for that. I'm sharing too links with you that might help you:

https://api.jquery.com/promise/

https://api.jquery.com/jquery.when/

Upvotes: 2

Related Questions