Angular combining data from different methods

angular subscribe to multiple observables
forkjoin
rxjs
angular multiple subscriptions
angular resolve multiple observables
angular combinelatest
angular multiple subscriptions to same observable
combinelatest angular 8 example

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 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
    });
} 

How to combine the results of two observable in angular?, A great way to do this is to use the rxjs forkjoin operator (which is included with Angular btw), this keeps you away from nested async function� It is a real challenge for the angular developer to share the data between components. I have seen angular.io tutorials about data sharing and I found that the example is not so great to understand the concept of data sharing. So here in this tutorial , I have come up with demonstration of data sharing concepts in angular with real time

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.

Subscribing to Multiple Observables in Angular Components , The third Observable emits multiple values one value every second. Below are some functions that return the Observables that we will use in our� I need all three to resolve, then process the data in each, and then assign the result to an angular model. I am sure I am missing something obvious, but does anyone have a suggestion? In my real work I have several ajax calls multiple data sources and a lot of processing (comparing values, sorting, concatenating, etc) to come up with one good

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>

Combine Multiple Observables Using combineLatest In Angular App, Now, Angular provides a new feature to call multiple HTTP requests by three independent HTTP requests to get the master data from different data sources. and getSampleMasterData3() are the Observable methods. Together, a component's class and template form a view of your application data. The process of combining data values with their representation on the page is called data binding. You display your data to a user (and collect data from the user) by binding controls in the HTML template to the data properties of the component class.

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

Observables compared to other techniques, This makes observables useful for getting multiple values over time. Observables differentiate between chaining and subscription. Promises only have .then()� Two-way data binding. Two-way data binding enables the communication between the form and the class. It allows for changes in the fields of the model to automagically appear in the form controller, and for the data entered by the user to immediately update the model. The two-way binding syntax is: [(ngModel)]="fieldName"

Using observables to pass values, An observable can deliver multiple values of any type—literals, messages, When the consumer unsubscribes, clean up data ready for next subscription. return It is an object that defines callback methods to handle the three types of � Passing data between components in angular is obvious while working on the angular project. The flow of the data among the components can be on different directions based on the requirement of the project. Child component to Parent component or Parent Component to Child component. In this tutorial, we will see the two different methods of

Angular 2: HTTP, Observables & Concurrent Data Loading, How to run multiple concurrent HTTP requests, with the callbacks running only after The onNext method will receive the HTTP response data. This method is different to the methods we looked at before because it is using the HTTP-post-request instead of the get-request. This REST-method is used to send new objects to the server. For example, if we would want to insert a new cat into our (not existing) cat-database, we would use this method for that.

3 Common Angular Rxjs Pitfalls, We have written our newest service method, all the data will be Just like calling a function multiple times gives you multiple return values. Browse other questions tagged angular methods angular2-template angular2-directives or ask your own question. The Overflow Blog Full data set for the 2020 Developer Survey now available!

Comments