Merging http observables using forkjoin

Question

I'm trying to avoid nested observables by using forkjoin. The current (nested) version looks like this:

  this.http.get('https://testdb1.firebaseio.com/.json').map(res => res.json()).subscribe(data_changes => {     this.http.get('https://testdb2.firebaseio.com/.json').map(res => res.json()).subscribe(data_all => {       /* Do this once resolved */       this.platform.ready().then(() => {         this.storage.set('data_changes', data_changes);         this.storage.set('data_all', data_all);         document.getElementById("chart").innerHTML = "";         this.createChart();       });     });   },      err => {       this.platform.ready().then(() => {         console.log("server error 2");         document.getElementById("chart").innerHTML = "";         this.createChart();       });     });   } 

I can rewrite the first part as:

Observable.forkJoin(   this.http.get('https://testdb1.firebaseio.com/.json').map((res: Response) => res.json()),   this.http.get('https://testdb2.firebaseio.com/.json').map((res: Response) => res.json()) ) 

But i'm not sure how I would then add the .subscribe method to access both data_changes and data_all.

Looking at another example, I know it should look something like .subscribe(res => this.combined = {friends:res[0].friends, customer:res[1]});, but i'm not sure how to adapt this to my example.

Answer 1

Try to use combineLatest instead of forkJoin :

With combineLatest :

const combined = Observable.combineLatest(   this.http.get('https://testdb1.firebaseio.com/.json').map((res: Response) => res.json()),   this.http.get('https://testdb2.firebaseio.com/.json').map((res: Response) => res.json()) )  combined.subscribe(latestValues => {     const [ data_changes , data_all ] = latestValues;     console.log( "data_changes" , data_changes);     console.log( "data_all" , data_all); }); 

You can also handle it by forkJoin , but forkJoin will return data when all calls are finished and return result , but in combineLatest When any observable emits a value, emit the latest value from each.

With forkJoin :

const combined = Observable.forkJoin(   this.http.get('https://testdb1.firebaseio.com/.json').map((res: Response) => res.json()),   this.http.get('https://testdb2.firebaseio.com/.json').map((res: Response) => res.json()) )  combined.subscribe(latestValues => {     const [ data_changes , data_all ] = latestValues;     console.log( "data_changes" , data_changes);     console.log( "data_all" , data_all); }); 

Call both and check the console log , you will get idea.