CODEWITHSUNDEEP
javascriptjqueryajax
Om3ga
Om3ga

Reputation: 32853

Chained ajax request with jquery promise

I have following code. What I am doing is that first I make an ajax request to first url. I get a response and I need some data from that response. For that reason, I put that data into user object. That response also include another url. Then I make another ajax request to that new url. And I get response from the url and I add that data to user object. In the last then() function I return user object. However, when I call get().done(function(data) { console.log(data) }), I only get user.data array only. It does not include user's detail in first ajax request. How can I merge the data from these two requests and return as a promise(deferred maybe)?

    var get = function() {
        var user = {};

        return $.ajax({
            url: 'URL',
            method: 'GET',
            type: 'JSON'
        }).then(function(user) {
            user['name'] = user.name;
            user['joined'] = user.create_at;

            return $.ajax({
                url: user.url,
                method: 'GET',
                type: 'JSON'
            });
        }).then(function(data) {
            user['data'] = data;
            return user;
        });
    },

Upvotes: 2

Views: 84

Answers (3)

Jaromanda X
Jaromanda X

Reputation: 1

Put your second .then inside the first .then (chained onto the $.ajax call) like so

var get = function() {
    return $.ajax({
        url: 'URL',
        method: 'GET',
        type: 'JSON'
    }).then(function(user) {
        return $.ajax({
            url: user.url,
            method: 'GET',
            type: 'JSON'
        }).then(function(data) {
            return {
                name: user.name,
                joined: user.create_at,
                data: data
            };
        });
    });
},

no need for any other variables at all

Upvotes: 1

guest271314
guest271314

Reputation: 1

You can set the context option of $.ajax() calls to user object

var get = function() {
    var user = {};

    return $.ajax({
        url: 'URL',
        method: 'GET',
        type: 'JSON',
        context: user
    }).then(function(user) {
        this['name'] = user.name;
        this['joined'] = user.create_at;

        return $.ajax({
            url: user.url,
            method: 'GET',
            type: 'JSON',
            context: this
        });
    }).then(function(data) {
        this['data'] = data;
        return this;
    });
}

Upvotes: 2

Dimitris Karagiannis
Dimitris Karagiannis

Reputation: 9358

In this function 

function(user) {
    user['name'] = user.name;
    user['joined'] = user.create_at;

    return $.ajax({
        url: user.url,
        method: 'GET',
        type: 'JSON'
    });
}

You are creating a user variable in the function's local scope. So when you do user['name'] = user.name;, on the left part of the assignment, you are not referring to the var user = {} you defined outside, at the highest scope, but to the local user.

Try naming the fetched user data something else, like userData

Upvotes: 1

Related Questions