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.

Vivek Doshi · Accepted Answer · 2017-10-24 10:08:33Z

48

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.

edited Oct 24, 2017 at 10:08

answered Apr 2, 2017 at 8:35

Vivek Doshi

58.8k12 gold badges120 silver badges126 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

cartant Over a year ago

This would be a better answer if it included an explanation of why the OP should favour combineLatest.

Vivek Doshi Over a year ago

Okay , just one minute.

Vivek Doshi Over a year ago

If you find out this helpfull , please accept the answer also.

cartant Over a year ago

Your description of the behaviour of combineLatest is incorrect. It won't emit anything until each of the observables it's passed has emitted at least once. And the HTTP observables will emit only once, so how will using it differ from using forkJoin, if at all?

Chris Putnam Over a year ago

A side note, forkJoin will only trigger when the observables return a new value after your call forkJoin, so if one of the observables has already returned a value forkJoin will never trigger next. combineLatest will trigger even if the observable has already emitted its value. Thought this might help someone if who comes across this page and can't figure out why their subscribe next function is never being it.

|

Collectives™ on Stack Overflow

Merging http observables using forkjoin

1 Answer 1

10 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related