How to combine the results of two observable in angular?

this.http.get(url1)
    .map((res: Response) => res.json())
    .subscribe((data1: any) => {
        this.data1 = data1;
    });

this.http.get(url2)
    .map((res: Response) => res.json())
    .subscribe((data2: any) => {
        this.data2 = data2;
    });

toDisplay(){
  // logic about combining this.data1 and this.data2;
}

The above is wrong, because we couldn't get data1 and data2 immediately.

this.http.get(url1)
    .map((res: Response) => res.json())
    .subscribe((data1: any) => {
    this.http.get(url2)
        .map((res: Response) => res.json())
        .subscribe((data2: any) => {
            this.data2 = data2;

            // logic about combining this.data1 and this.data2
            // and set to this.data;
            this.toDisplay();
        });
    });

toDisplay(){
  // display data
  // this.data;
}

I can combine the results in the subscribe method of the second observable. But I'm not sure if it's a good practice to achieve my requirement.

Update:
Another way I found is using forkJoin to combine the results and return a new observable.

let o1: Observable<any> = this.http.get(url1)
    .map((res: Response) => res.json())

let o2: Observable<any> = this.http.get(url2)
    .map((res: Response) => res.json());

Observable.forkJoin(o1, o2)
  .subscribe(val => {  // [data1, data2]
    // logic about combining data1 and data2;
    toDisplay(); // display data
});

toDisplay(){
  // 
}

Edit 2021: here is an updated tutorial:

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

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.

We can combine observables in different ways based on our need. I had two problems:

The response of first is the input for the second one: flatMap() is suitable in this case.
Both must finish before proceeding further: forkJoin()/megre()/concat() can be used depending on how you want your output.

You can find details of all the above functions here. You can find even more operations that can be performed to combine observables here.

TRY with forkJoin if it's not working then give this a try combineLatest() What it do - it combine the last emitted value from your stream array into one before completion of your stream array.

Observable.combineLatest(
        this.filesServiceOberserval,
        this.filesServiceOberserval,
        this.processesServiceOberserval,
    ).subscribe(
        data => {
          this.inputs = data[0];
          this.outputs = data[1];
          this.processes = data[2];
        },
        err => console.error(err)
    );

How to combine the results of two observable in angular?

Related

Recent Posts