2 observables - do something when both of them return data successfully

Question

this.pokojeService.pobierzPokoje().subscribe(pokoje => {
  this.pokoje = pokoje;
});
this.pokojeService.pobierzTypyPokoi().subscribe(pokojeTypy => {
  this.pokojeTypy = pokojeTypy;
});

those are my 2 observables. I want to iterate on pokoje and pokojetypy, but what if one of them return error, not data? I want to prevent that and check if both of them returned data successfully

try forkjoin https://www.learnrxjs.io/operators/combination/forkjoin.html https://stackoverflow.com/questions/34055280/rxjs-concat-three-promises-distinguish-results/34055587#34055587 — Ric, Nov 29 '17 at 09:03
Stab in the dark but can maybe use toPromise and the Promise.all as well. — shaunhusain, Nov 29 '17 at 09:05
@PawełMeller you could transform the observables to promises, but wont make anything easier — Jota.Toledo, Nov 29 '17 at 09:28
Possible duplicate of [How to know when all Angular2 HTTP calls are finished](https://stackoverflow.com/questions/36014508/how-to-know-when-all-angular2-http-calls-are-finished) — Jota.Toledo, Nov 29 '17 at 09:39
Use forkjoin works for me , example https://www.metaltoad.com/blog/angular-2-http-observables-and-concurrent-data-loading — Americo Arvani, Nov 29 '17 at 09:49

score 0 · Answer 1 · answered Nov 29 '17 at 09:59

Use the forkJoin method :

Observable.forkJoin(this.pokojeService.pobierzPokoje(), this.pokojeService.pobierzTypyPokoi()).subscribe(response => {
      if(response && response.length === 2){
        let pobierzPokojeResult = response[0];
        let pobierzTypyPokoiResult = response[1];
        // PUT YOUR CODE HERE
      }
    });

Ray Luxembourg · Answer 2 · 2017-11-29T09:47:47.703

const obs1$ =  this.pokojeService.pobierzPokoje()
obs1$.catch((e: any) => Observable.throw(this.errorHandler(e)))

const obs2$ =  this.pokojeService.pobierzTypyPokoi()
obs2$.catch((e: any) => Observable.throw(this.errorHandler(e)))

Observable.zip(obs1$,obs2$).subscribe(res=>{
  if(res[0] && res[1]){
    do Something...
  }
})

you can filter response instead of catching errors, you can transform data if you want. use obs1$.map(data=>....) make sure to return false if no data or w/e you want and this should answer your question

2 observables - do something when both of them return data successfully

2 Answers2