CODEWITHSUNDEEP
javascriptangularjs
Alberto Real
Alberto Real

Reputation: 1

AngularJS return two http get requests only when resolved

I have an Angular app, and in the controller I need to call a function which makes two http get requests, and I need this function to return these values just when they are resolved. I cannot make them in the $routeProvider resolve because this function needs a value obtained in the same controller.

I show part of the controller:

function myController(info) {
 var vm = this;
 vm.name = info.data.name;

 vm.extra_data = MyService.getExtras(name);
}

And here is part of the code of the service:

function myService($http, $q, API_EVENT1, API_EVENT2) {
 return {
  getExtras: getExtras
 }

 function getExtras(name) {
  var request1 = API_EVENT1 + '/' + name; 
  var request2 = API_EVENT2 + '/' + name;

 }
}

The function is not complete due to I have tried several methods, but I wasn't successful at all.

My problem is how to return (in getExtras function) both of the results of the requests. I have tried using $q.defer, $q.all and promises, but I'm not able to achieve it.

Using $q.all, for example, I got to retrieve the result, but when I call the function, the object extra_data is undefined, due to the requests have been executed asynchronously.

Thank you in advance for your responses.

Upvotes: 0

Views: 749

Answers (1)

udalmik
udalmik

Reputation: 7988

I would use $q.all to return combined promise from Service, and process result in controller. e.g.:

function myService($http, $q, API_EVENT1, API_EVENT2) {
  return {
    getExtras: getExtras
  }
  function getExtras(name) {
    return $q.all([
      $http({method: 'GET', url: API_EVENT1 + '/' + name}), 
      $http({method: 'GET', url: API_EVENT2 + '/' + name})])
     );
  }
}

function myController(info) {
  var vm = this;
  vm.name = info.data.name;

  MyService.getExtras(name).then(function(data) {
    vm.extra_data.first = data[0];
    vm.extra_data.second = data[1];
  });
}

Upvotes: 1

Related Questions