How to combine the results of two observable in angular?

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

Continue reading...