Dinesh Gupta Dinesh Gupta - 3 months ago 8
AngularJS Question

How to execute only after all AJAXcalls are made?

As you can see function

getPollById
is called depending on the
responselength
, so for every response, the API makes a call to access the data. Using
$q.all
, I am unable to execute after everything has been executed. So how do I execute after all calls are made? What mistake am I making here? I am getting the consoled.log after the first function. I want after the
getPollById
finished requesting for the entire
response.length
. How do I do it ?

adminApp.controller('PollController', function($scope,$window,$timeout, $rootScope,$routeParams, $http, $location, $q ) {
displayLoader("Loading...", "100px");
var httpData1 = $http({
method: 'get',
url: "the url",
}).
success(function(response) {
$scope.poll = response;
for (var i = 0; i < response.length; i++) {
getPollById(response[i], i);
angular.element('#loadering').fadeOut('slow');
}
}).
error(function(response) {
console.log(response || "Request failed");
});
var httpData2;

function getPollById(i, index){
httpData2 = $http({
method: 'post',
url: BASE_URL+'admin_api/admin_poll_api/admin_poll/',
data: i
}).
success(function(response) {
appendData(response, index);
var labels = [];
var data = [];
for (var i = 0; i < response.response.options.length; i++) {
labels.push(response.response.options[i].options);
data.push(response.response.options[i].votes);
}
}).
error(function(response) {
console.log(response || "Request failed");
});
}

$scope.polls=[];
function appendData(response, index){
$scope.polls[index] = response;
}
$q.all([httpData1, httpData2]).then(function() {
console.log("all calls have finished ");
})
});

Answer

at the time of execution, there is only one promise to resolve - httpData1

you have to call $q.all after httpData2 is set

the problem is that you may have more than one additional promise to resolve, so you should collect them and return as a bulk promise:

adminApp.controller('PollController', function($scope,$window,$timeout, $rootScope,$routeParams, $http, $location, $q ) {
    displayLoader("Loading...", "100px");
    $http({
        method: 'get',
        url: "the url",
    }).then(function(response) {
        $scope.poll = response;
        var promises = [];

        for (var i =  0; i < response.length; i++) {
            promises.push(getPollById(response[i], i));
            angular.element('#loadering').fadeOut('slow');
        }

        return $q.all(promises);
    }, function(response) {
        console.log(response || "Request failed");
    }).then(function() {
        console.log("all calls have finished ");
    })

    function getPollById(i, index)
    {
        return $http({
            method: 'post',
            url:  BASE_URL+'admin_api/admin_poll_api/admin_poll/',
            data: i

        }).then(function(response) {
            appendData(response, index);
            var labels = [];
            var data = [];
            for (var i = 0; i < response.response.options.length; i++) {
                labels.push(response.response.options[i].options);
                data.push(response.response.options[i].votes);
            }
        }, function(response) {
            console.log(response || "Request failed");
        });
    }

    $scope.polls=[];
    function appendData(response, index){
        $scope.polls[index] = response;

    }
});

what I have done here is to chain your main promise with bulk of additional promises