Question

25

How to combine the results of two observable in angular?

rated 0 times [ 32] [ 7] / answers: 1 / hits: 93666 / 7 Years ago, sat, august 5, 2017, 12:00:00

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(){

  // 

}

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

daryldeontaeh

Add To Favorites

Follow

Total Points: 46

Total Questions: 97

Total Answers: 105

Location: Maldives

Member since Sat, Jan 29, 2022

2 Years ago

answered 7 Years ago bryonk · Accepted Answer

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.