Merging http observables using forkjoin
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.
Martin
Updated on July 19, 2022Comments
-
Martin almost 2 years
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 bothdata_changes
anddata_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.