Combine the result of two depending observables (Rxjs)

Question

i have two observables A and B. I first have to get A until i could take B.

If they are independently i could do something like forkJoin to get the result. But due to the fact i could take B only after i got A i am struggeling a little. I tried switchMap, but seems also not to work.

So what i want to achive is:

get observable A
get observable B

combine A and B into a result C

public loadConfiguration(): Observable<ProductConfiguration> {
    return this.service.getA().pipe(
     switchMap(response => {
      return this.service.getB(response.id);
     }
    ),
   map(result => this.getData(result)) // here i want A and B thogether so result should contain A and B
  );
}

Currently i am a little lost. Regards Oliver

HTN · Accepted Answer · 2020-05-15 12:38:48Z

You can do it like this:

public loadConfiguration(): Observable<ProductConfiguration> {
  return this.service.getA().pipe(
     switchMap(response => {
      return this.service.getB(response.id).pipe(
        map(responseB => ({responseA: response, responseB})),
      );
     }),
     map(result => this.getData(result)) // result already have responseA & responseB
  );
}

Or this:

public loadConfiguration(): Observable<ProductConfiguration> {
  return this.service.getA().pipe(
    switchMap(response => {
      return this.service.getB(response.id).pipe(
        map(responseB => this.getData(...)), // you have access to response and responseB here
      );
    }),
  );
}

I choose the first suggestion, cause it was first :-) but thx anyway

Lievno · Accepted Answer · 2020-05-15 13:04:04Z

0

You can use the second argument of the switchMap (resultSelector) to combine the result:

public loadConfiguration(): Observable<ProductConfiguration> {
        return this.service.getA()
                   .pipe(
                       switchMap(response => this.service.getB(response.id), (a, b) => this.getData({a, b})),
                   );
    }

rxjs learn switchMap

edited May 15, 2020 at 13:04

answered May 15, 2020 at 12:56

Lievno

1,0419 silver badges17 bronze badges

Comments

StepUp · Accepted Answer · 2020-05-15 13:06:16Z

Try to use zip method to combine both results of both Observable:

public loadConfiguration(): Observable<ProductConfiguration> {
    return this.service.getA().pipe(
        switchMap(response => {
            return Observable.zip(
                this.service.getB(response.id),
                of(response)
            ); 
            return this.service.getB(response.id);
        })),
        .subscribe(([resA, resB]) => {
            console.log('resA', resA);
            console.log('resB', resB);

        }

According to ReactiveX:

zip combines the emissions of multiple Observables together via a specified function and emit single items for each combination based on the results of this function

Work example can be seen at stackbitz.com.

Collectives™ on Stack Overflow

Combine the result of two depending observables (Rxjs)

3 Answers 3

1 Comment

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Related