Angular - Multiple $http.get Requests for Data

Question

What is the best approach to take when making multiple calls to an API for data needed in the same view?

For example, you have multiple select boxes which need to contain data pulled in from outside the app, all in the same view.

Is there a more elegant solution than simply firing them all at once in your controller? Such as the following

app.controller('myCtrl', function($service) { 

   $service.getDataOne().then(function(response) {
      $scope.dataOne = response;
   }, function(error) {
      console.log(error);
   });

   $service.getDataTwo().then(function(response) {
      $scope.dataTwo = response;
   }, function(error) {
      console.log(error);
   })
});

etc...with each service function performing a $http.get request.

While this works, I feel there is probably a more elegant solution.

Any thoughts as always is much appreciated.

You can use q.all(), as it accepts an array of promises that will only be resolved when all of the promises have been resolved. See this answer — Mark C.
– Mark C., Commented Oct 29, 2015 at 20:33

Mark C. · Accepted Answer · 2015-10-29 20:45:27Z

2

You can use q.all(), as it accepts an array of promises that will only be resolved when all of the promises have been resolved.

$q.all([
      $service.getDataOne(),
      $service.getDataTwo()
    ]).then(function(data){
      $scope.dataOne = data[0];
      $scope.dataTwo = data[1];
 });

If you look at the link, q.All() is at the very bottom of the page

edited Oct 29, 2015 at 20:45

answered Oct 29, 2015 at 20:35

Mark C.

6,5004 gold badges39 silver badges74 bronze badges

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

6 Comments

Chris L Over a year ago

Mark, why should he include a whole external q library rather than use angular's own $q? Don't you think he should use angular's version?

Mark C. Over a year ago

@ChrisL Where do you see me telling OP to load an external library?

Chris L Over a year ago

I think the syntax for Angular is $q . There is another q library which angular's is modeled after. github.com/kriskowal/q that is q without the $ . If I am wrong I appologize, but this could be confusing... Although I agree with your answer if you meant angular's version!

Mark C. Over a year ago

@ChrisL Ah! The $ got trimmed when I was formatting my answer haha, thanks. Great catch!

user2085143 Over a year ago

You just call this like it is in the controller?

|

Chris L · Accepted Answer · 2015-10-29 20:33:56Z

I believe you are looking for the $q service.

http://jsfiddle.net/Zenuka/pHEf9/21/

https://docs.angularjs.org/api/ng/service/$q

function TodoCtrl($scope, $q, $timeout) {
function createPromise(name, timeout, willSucceed) {
    $scope[name] = 'Running';
    var deferred = $q.defer();
    $timeout(function() {
        if (willSucceed) {
            $scope[name] = 'Completed';
            deferred.resolve(name);
        } else {
            $scope[name] = 'Failed';
            deferred.reject(name);
        }
    }, timeout * 1000);
    return deferred.promise;
}

// Create 5 promises
var promises = [];
var names = [];
for (var i = 1; i <= 5; i++) {
    var willSucceed = true;
    if (i == 2) willSucceed = false;
    promises.push(createPromise('Promise' + i, i, willSucceed));
}

// Wait for all promises    
$scope.Status1 = 'Waiting';
$scope.Status2 = 'Waiting';
$q.all(promises).then(
    function() { 
        $scope.Status1 = 'Done'; 
    }, 
    function() { 
        $scope.Status1 = 'Failed'; 
    }
).finally(function() {
    $scope.Status2 = 'Done waiting';
});
}

Credit: Code shamelessly stolen from unknown creator of fiddle.

Shyju · Accepted Answer · 2015-10-29 20:39:04Z

0

If it for loading the looku pdata for all the dropdowns, I would make one call to get all the lookup data in one single payload. Something like this. Each property value is an array of items for each dropdown.

{
    "eventMethods": [
        {
            "name": "In Person",
            "id": 1
        },
        {
            "name": "Phone",
            "id": 2
        }
    ],
    "statuses": [
        {
            "name": "Cancelled",
            "id": 42
        },
        {
            "name": "Complete",
            "id": 41
        }
    ]
}

edited Oct 29, 2015 at 20:39

answered Oct 29, 2015 at 20:31

Shyju

220k106 gold badges420 silver badges499 bronze badges

Collectives™ on Stack Overflow

Angular - Multiple $http.get Requests for Data

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related