merge $http.get() with another $http.get()/angular

Question

I have the service : service.getMarketedPrograms = function() { return $http.get( archApiUrl + "program/marketed-program" ).then(function( result ) { return result.data; }); };

I want to append the service with the above :

service.getEligibility = function( params ) { return $http.get( maverickApiUrl + "quote/getEligibility", { params: params }).then( transformEligibility ); };

After merging I want to filter the final one

Artem Arkhipov · Accepted Answer · 2017-10-26 08:27:57Z

0

If I understand correctly, you need to get both results firstly and then decide what to return.

You need to inject $q service (angularjs promises) and then use such code:

var promises = [getMarketedPrograms(), getEligibility()];
$q.all(promises).then(function(results){ //array of results
     console.log(results[0]); //marketedPrograms result
     console.log(results[1]); //getEligibility result
     return results[0]; //for example, or do whatever you need
})

answered Oct 26, 2017 at 8:27

Artem Arkhipov

7,5256 gold badges34 silver badges56 bronze badges

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

2 Comments

Debasmita Swain Over a year ago

Thanks for your answer,but in my case I have both the services in different controllers of two different .js files

Artem Arkhipov Over a year ago

@DebasmitaSwain , why can't you inject both services in controller? Or create a separate third service for completing this task, but to be honest I think that everything is much more simpler and you are just going in the wrong way

Slava Utesinov · Accepted Answer · 2017-10-27 09:42:09Z

If you have two different controllers and two services, to synchronize them all, you should use events mechanism, i.e. $broadcast and $on methods. So, whenAllDone function will be called only when both controllers have done their tasks($scope.self = true):

function controllerFactory(timeout, name){
  return function($scope, $timeout){
    var self = this; 
    var outerResult;
    $scope.name = name;

    whenAllDone = (data) => {
      console.log(`Sync ${name} - selfResult: ${timeout}, outerResult: ${data}`);
    }

    $scope.$on('done', (x, arg) => {          
      if(arg.ctrl != self){
        $scope.outer = true;  
        outerResult = arg.val;
        if($scope.self)
          whenAllDone(arg.val);
      }
    });
    //mimic for getEligibility and getMarketedPrograms
    $timeout(() => {    
      $scope.self = true;    
      $scope.$parent.$broadcast('done', { ctrl: self, val: timeout });    
      if($scope.outer)
        whenAllDone(outerResult);
    }, timeout);
  }
}

angular.module('app', [])
.controller('ctrl1', controllerFactory(2000, 'ctrl1'))
.controller('ctrl2', controllerFactory(5000, 'ctrl2'))

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app='app'>
  <script type="text/ng-template" id="myTemplate">       
      <h4>{{name}}:</h4>
      <span ng-style="{'background-color': self ? 'green' : 'white'}">self</span>
      <span ng-style="{'background-color': outer ? 'green' : 'white'}">outer</span>            
  </script>

  <div ng-controller='ctrl1' ng-include="'myTemplate'"></div>
  <div ng-controller='ctrl2' ng-include="'myTemplate'"></div>
</div>

Collectives™ on Stack Overflow

merge $http.get() with another $http.get()/angular

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related