How to combine the results of two observable in angular?

by

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 hell where you have to nest function after function using the callbacks.

Here’s a great tutorial on how to use forkjoin (and more):

https://coryrylan.com/blog/angular-multiple-http-requests-with-rxjs

In the example you make two http requests and then in the subscribe fat arrow function the response is an array of the results that you can then bring together as you see fit:

let character = this.http.get('https://swapi.co/api/people/1').map(res => res.json());
let characterHomeworld = this.http.get('http://swapi.co/api/planets/1').map(res => res.json());

Observable.forkJoin([character, characterHomeworld]).subscribe(results => {
  // results[0] is our character
  // results[1] is our character homeworld
  results[0].homeworld = results[1];
  this.loadedCharacter = results[0];
});

The first element in the array always corresponds to the first http request you pass in, and so on. I used this successfully a few days ago with four simultaneous requests and it worked perfectly.

More Related Contents:

  1. based on mobile number how do i get country code in javascript or anguler 2+ [duplicate]
  2. How do I return the response from an Observable/http/async call in angular?
  3. How to load external scripts dynamically in Angular?
  4. Property ‘…’ has no initializer and is not definitely assigned in the constructor
  5. Angular 5 Service to read local .json file
  6. Angular: Can’t find Promise, Map, Set and Iterator
  7. Wait for multiple promises to finish
  8. Angular2 component’s “this” is undefined when executing callback function
  9. Angular 2: Callback when ngFor has finished
  10. Upgrading to angular-6.x gives “Uncaught ReferenceError: global is not defined”
  11. Angular2 router 2.0.0 not reloading components when same url loaded with different parameters?
  12. How to subscribe to an event on a service in Angular2?
  13. Angular 2 pipe that transforms JSON object to pretty-printed JSON
  14. Angular 6 – process is not defined when trying to serve application
  15. Angular url plus sign converting to space
  16. How to Pass data from child to parent component Angular
  17. ‘Access-Control-Allow-Credentials’ header in the response is ” which must be ‘true’
  18. How to ‘wait’ for two observables in RxJS
  19. Generate dynamic css based on variables angular
  20. Angular interceptor exclude specific urls
  21. Angular 8 – Lazy loading modules : Error TS1323: Dynamic import is only supported when ‘–module’ flag is ‘commonjs’ or ‘esNext’
  22. Angular 2 Quickstart: unexpected token
  23. Angular 2 runOutsideAngular still change the UI
  24. Angular 4 – What is the right way to “wait for operation”?
  25. How to prevent angular material mat-menu from closing?
  26. Angular 2 AuthGuard Service with redirect?
  27. Observable.forkJoin with a for loop
  28. binding data to angular checkbox
  29. How to detect firestore connection failure
  30. iframe inside angular2 component, Property ‘contentWindow’ does not exist on type ‘HTMLElement’

Leave a Comment