Wait for all $http calls to finish in Angular

Question

I have a situation at the moment where I am making two calls to a service which contain $http calls (asynchronous) and am using a deferred to wait and set the scope data once it returns on both calls. This works fine, however, I am now needing to set a variable once both calls have completed (succeeded or failed) and am unsure as to how I go about this.

Here is my code:

//"use strict";

(function() {
var friendsController = function($scope, $log, friendsService)
{
    // prepare the $scope
    $scope.friendsData = {
        community: window.community,
        userId: 'someuser',
        friends: {},
        requests: {},
        requestsUtil : {
            dataLoad : true,
            dataSucc : false,
            dataErr : false
        },
        friendsUtil : {
            dataLoad: true,
            dataSucc: false,
            dataErr: false
        },
        dataLoad: true,
        dataSucc: false,
        dataLoadDone: false
    };

    // util
    var setStatus = function(stringType, load, succ, err) {//
         $scope.friendsData[stringType].dataLoad = load;
         $scope.friendsData[stringType].dataSucc = succ;
         $scope.friendsData[stringType].dataErr = err;
    }

    // get initial request data
    friendsService.getRequests(window.user.bpUser.display_name)
        .then(
            // success
            function(data) {
                if(data.friendRequests.length) {
                    $scope.friendsData.requests = data;
                    setStatus("requestsUtil", false, true, false);
                } else {
                    setStatus("requestsUtil", false, false, true);
                }

        },
            // error
            function(data, status, headers, config) {
                $log.log(data.error + ' ' + status);
                setStatus("requestsUtil", false, false, true);
        });

    // get initial friends data
    friendsService.getFriends(window.user.bpUser.display_name)
        .then(
            // success
            function(data) {
                if(data.friends.length) {
                    $scope.friendsData.friends = data;
                    setStatus("friendsUtil", false, true, false);
                } else {
                    setStatus("friendsUtil", false, false, true);
                }

        },
            // error
            function(data, status, headers, config) {
                $log.log(data.error + ' ' + status);
                setStatus("friendsUtil", false, false, true);
                scope.friendsData.loadDone = true;
        });

    $scope.friendsData.dataLoad = false;
    $scope.friendsData.dataSucc = true;
};

Profile.controller('profile.friendsController', ['$scope', '$log', 'friendsService',    friendsController]);
})();

As you can see, my two requests are:

friendsService.getRequests(window.user.bpUser.display_name)
        .then(

and:

friendsService.getFriends(window.user.bpUser.display_name)
        .then(

Is there anyway I can add some functionality to check whether both of these calls have finished and if so, set a variable to capture this in the scope? Thanks

Answer 1

You can use $q.all. Something like this (I'm not too sure about the error part):

$q.all([friendsService.getRequests(window.user.bpUser.display_name), 
       friendsService.getFriends(window.user.bpUser.display_name)])
.then(
    // success
    function(data) {
      if(data[0].friendRequests.length) {
         $scope.friendsData.requests = data[0];
         setStatus("requestsUtil", false, true, false);
      } else {
        setStatus("requestsUtil", false, false, true);
      }

      if(data[1].friends.length) {
         $scope.friendsData.friends = data;
         setStatus("friendsUtil", false, true, false);
      } else {
         setStatus("friendsUtil", false, false, true);
      }
    },
    // error
    function(error) {
       $log.log(error + ' ' + status);
       setStatus("requestsUtil", false, false, true);
       setStatus("friendsUtil", false, false, true);
    });

Answer 2

You can use $q.all() method

var promises = [];
promises.push(friendsService.getRequests(window.user.bpUser.display_name));
promises.push(friendsService.getFriends(window.user.bpUser.display_name));
$q.all(promises).then(function (results) { 
    doSomethingOnThem(results[0], results[1]);
});