Angular combining data from different methods

Question

I have data coming from three different services, i would like to combine data from all services into one method

this.data1 = this.activity1Service.getAllMonth(); 
this.data2 = this.activity2Service.getAllMonth();
this.data3 = this.activity3Service.getAllMonth();

this.alldata =  concat (this.data1,this.data2,this.data3);

and call as an Observable

GetAllData(): Observable<Data[]>{


  return (this.alldata);

  }

And then perhaps do ngOnInit()


ngOnInit() {

    this.dataService.getAllData().subscribe(aldata => this.AllData = aldata);
  }

I am not sure how to combine data coming from different services into one method, can anyone please help.

You can use the combineLatest from rxjs: learnrxjs.io/operators/combination/combinelatest.html — Ricardo Ferreira
– Ricardo Ferreira, Commented Dec 2, 2019 at 12:28
Or see the forkJoin, merge, and so on. It depends which approach you need for your data. Here is the list of combinations you can use: learnrxjs.io/operators/combination — Ricardo Ferreira
– Ricardo Ferreira, Commented Dec 2, 2019 at 12:30
That depends on what output you expect. So maybe forkJoin, combineLatest or merge is what you're looking for. — martin
– martin, Commented Dec 2, 2019 at 12:30

Saurabh Yadav · Accepted Answer · 2019-12-02 12:52:01Z

1

You can use forkJoin

forkJoin waits for each HTTP request to complete and group’s all the observables returned by each HTTP call into a single observable array and finally return that observable array.

Class file

getAllData() {
        this.data1 = this.activity1Service.getAllMonth(); 
        this.data2 = this.activity2Service.getAllMonth();
        this.data3 = this.activity3Service.getAllMonth();
        return forkJoin([this.data1, this.data2, this.data3]);
}


ngOnInit() {

    this.getAllData().subscribe(aldata => {
        console.log(data);
        this.AllData = aldata
    });
}

answered Dec 2, 2019 at 12:52

Saurabh Yadav

3,3861 gold badge12 silver badges21 bronze badges

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

Comments

michelepatrassi · Accepted Answer · 2019-12-02 12:51:46Z

1

I imagine you want something like this:

import { Observable, combineLatest } from 'rxjs';
import { map } from 'rxjs/operators';

  getAllData(): Observable<any[]>{
    return combineLatest([
      this.activity1Service.getAllMonth(), 
      this.activity2Service.getAllMonth(), 
      this.activity3Service.getAllMonth()
    ]).pipe(map([data1, data2, data3] => [...data1, data2, data3]))
  }

combineLatest will combine the latest emitted value from each observable, whil in the map you can have some logic to map the data as you wish.

answered Dec 2, 2019 at 12:51

michelepatrassi

2,09620 silver badges33 bronze badges

Comments

Sarvesh Mahajan · Accepted Answer · 2019-12-02 12:52:28Z

0

You can combine the promise of multiple APIs to single response object using $q.all(), please find below code snippet

var app = angular.module('app1', []);


app.factory('json',function($q,$http){
  
  return function(files){
    
    var promises = [];
    
    angular.forEach(files, function(file){
      
      var deffered  = $q.defer();
  
      $http({
        url : file,
        method: 'GET'
      }).
      success(function(data){
        deffered.resolve(data);
      }).
      error(function(error){
          deffered.reject();
      });
      
      promises.push(deffered.promise);

    })
    
    return $q.all(promises);
  }
  
});

app.controller('MainCtrl', function($scope,json) {
  $scope.name = 'World';
  
  json([[1,2,3], [4,5,6]]).then(function(datas){
    $scope.a = datas[0]
    $scope.b = datas[1]
  })

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js"></script>
  <body ng-app="app1" >
    <div ng-controller="MainCtrl">
    <pre>{{a | json}}</pre>
    <pre>{{b | json}}</pre>
    </div>
  </body>

answered Dec 2, 2019 at 12:52

Sarvesh Mahajan

9247 silver badges18 bronze badges

1 Comment

Abdelsalam Shahlol Over a year ago

The question is for Angular +2 and not AngularJs

Sasi Kumar M · Accepted Answer · 2019-12-02 12:59:31Z

0

concat does not wait for the responses to be received from all the observables, it completes a observable and sends its response then handles the next one. hence it won't combine the responses of observables.

You can think of concat like a line at a ATM, the next transaction (subscription) cannot start until the previous completes! for more details https://www.learnrxjs.io/operators/combination/concat.html

You might have to use either forkJoin or zip operator that waits for the responses from all the observables and combines them to produce the final results, for more details,

https://scotch.io/tutorials/rxjs-operators-for-dummies-forkjoin-zip-combinelatest-withlatestfrom

answered Dec 2, 2019 at 12:59

Sasi Kumar M

2,6501 gold badge26 silver badges26 bronze badges

Collectives™ on Stack Overflow

Angular combining data from different methods

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related