Setting of variable does not wait until ajax complete [duplicate]

Question

In the code below I'm loading two ajax requests.

The first is 'getTeams()' which loads an array of teams, each with an id. For each team, I then use the id to get all users that match the id within 'getUsers(teamId)', and set that to teams[i].users

However, the setting of teams[i].users does not wait for a response, and continues with the for loop. It then console logs the 'teams' array created. And only then does it load the ajax requests.

Is there a way to wait for the request to complete within 'getUsers()' before teams[i].users is set?

Thanks

function getUsers(teamId) {
    $.ajax({
        type: 'GET',
        dataType: "json",
        url: 'https://app.gohire.io/' + gohire.client.id + '/api/get-users/?teamId=' + teamId + '/',
        success: function(response) {
            return response;
        },
        error: function(data) { alert((data.responseJSON) ? ((data.responseJSON.error) ? data.responseJSON.error : 'An error occurred') : 'An error occurred'); }
    });
    return false;
}

function getTeams() {
    $.ajax({
        type: 'GET',
        dataType: "json",
        url: 'https://app.gohire.io/' + gohire.client.id + '/api/get-teams/',
        success: function(response) {
            teams = response;

            for (var i = 0; i < teams.length; i++) {
                var team = teams[i];
                teams[i].users = getUsers(teams[i].id);
            }

            console.log(teams);
            render();
        },
        error: function(data) { alert((data.responseJSON) ? ((data.responseJSON.error) ? data.responseJSON.error : 'An error occurred') : 'An error occurred'); }
    });
}
getTeams();

UPDATE: This is the only solution that I found to the problem. Although the question has been marked as a duplicate of this question, I did not find me answer there, as the main problem (for me) was caused by the for loop.

However, it did help me find the actual answer to my problem which can be viewed here

$.ajax({
    type: 'GET',
    dataType: "json",
    url: 'https://app.gohire.io/' + gohire.client.id + '/api/get-teams/',
    success: function(response) {
        teams = response;
        var ajaxCount = 0;

        // the below ajax request won't be called until later
        // therefore, 'i' must be captured, which is done by creating a new scope
        // creating a new scope in javascript is done by creating a new function
        for (i = 0; i < teams.length; i++) {
            (function(i) {
                $.ajax({
                    type: "GET",
                    dataType: "json",
                    url: 'https://app.gohire.io/' + gohire.client.id + '/api/get-users/?teamId=' + teams[i].id + '/',
                    success: function(request) {
                        teams[i].users = request || [];
                        // count ajax requests, to only render on last
                        ajaxCount++;
                        if (ajaxCount == teams.length) { render(); }
                    }
                });
            })(i);
        }
    },
    error: function(data) { alert((data.responseJSON) ? ((data.responseJSON.error) ? data.responseJSON.error : 'An error occurred') : 'An error occurred'); }
});

See the linked question's answers. Your getUsers function never returns anything (the return response inside the success callback returns that value from the callback [which doesn't do anything], not from getUsers), and can't return the result of an asynchronous operation in any case. — T.J. Crowder
– T.J. Crowder, Commented Dec 28, 2016 at 12:24
Thank you very much for this. I did search around but have not seen this answer — James Moran
– James Moran, Commented Dec 28, 2016 at 12:25
@T.J.Crowder. I went through the link you provided, however, I did not find the answer to my question there. I have updated my code with the solution that worked for me. Thank you for the help though! — James Moran
– James Moran, Commented Dec 28, 2016 at 21:49

anshuVersatile · Accepted Answer · 2016-12-28 12:27:08Z

-1

function getUsers(teamId, fun) {
    $.ajax({
        type: 'GET',
        dataType: "json",
        url: 'https://app.gohire.io/' + gohire.client.id + '/api/get-users/?teamId=' + teamId + '/',
        success: fun,
        error: function(data) { alert((data.responseJSON) ? ((data.responseJSON.error) ? data.responseJSON.error : 'An error occurred') : 'An error occurred'); }
    });
    return false;
}

function getTeams() {
    $.ajax({
        type: 'GET',
        dataType: "json",
        url: 'https://app.gohire.io/' + gohire.client.id + '/api/get-teams/',
        success: function(response) {
            teams = response;

            for (var i = 0; i < teams.length; i++) {
                var team = teams[i];
                getUsers(teams[i].id,function(teams[i].users){
                    //do the stuff here
                });
            }

            console.log(teams);
            render();
        },
        error: function(data) { alert((data.responseJSON) ? ((data.responseJSON.error) ? data.responseJSON.error : 'An error occurred') : 'An error occurred'); }
    });
}
getTeams();

answered Dec 28, 2016 at 12:27

anshuVersatile

2,0761 gold badge11 silver badges18 bronze badges

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

1 Comment

Anupam Over a year ago

But render() will get called before all the users data is present

Collectives™ on Stack Overflow

Setting of variable does not wait until ajax complete [duplicate]

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related