Bdtjtk

CLOSED

Maybe my question is a bit complicated but I can't figure out how to realize what I want.

Context

Three parallels observables emits value, then, when I've all three values, I modify them a little and then I want to call three observable in series.
Like the image below:

Now?

For the moment I managed to do this by putting my three parallel observable in a zip operator then subscribe to it, modify the value, and on complete, call the other one, subscribe, and on complete.. Three times !

this.service.Function(id) //return zip(Ob1, Ob2, Ob3)

  .subscribe(

    ([val1, val2, val3]) => {

      /*DO SOMETHING*/

      this.tmp1 = val1;

      this.tmp2 = val2;

      this.tmp3 = val3;

    },

    () => {}, //on error

    () => { //on complete

      let newV1, newV2, newV3 = ;

      [newV1, newV2, newV3 ] = [

        this.tmp1.map(x => x.id2),

        this.tmp2.map(x => x.id2),

        this.tmp3.map(x => x.id2)

      ];

      this.service.Function2(newV1)

        .subscribe(res => {

            //DO SOMETHING

          },

          () => {},

          () => { //on complete

            this.service.Function2(newV2)

              .subscribe(res => {

                  //DO SOMETHING

                },

                () => {},

                () => { //on complete

                  this.service.Function2(newV3)

                    .subscribe(res => {

                        //DO SOMETHING

                      },

                      () => {},

                      () => {

                        //DO SOMETHING

                      });

                });

          });

    }

  );

What I tried

I tried something different with switchMap and concat but concat doesn't return me my values as Array...

this.kycService.getDocuments(idNotif).pipe(

  switchMap(([val1, val2, val3]) => {

    this.tmp1 = val1;

    this.tmp2 = val2;

    this.tmp3 = val3;



    let newV1, newV2, newV3 = ;

      [newV1, newV2, newV3 ] = [

        this.tmp1.map(x => x.id2),

        this.tmp2.map(x => x.id2),

        this.tmp3.map(x => x.id2)

      ];

    return concat(this.service.Function2(newV1),this.service.Function2(newV2), this.service.Function2(newV3))

  }))

  .subscribe(([Ob_newV1, Ob_newV2, Ob_newV3]) => {

    //DO SOMETHING

    //[Ob_newV1, Ob_newV2, Ob_newV3] Doesn't work, I need to do val => {}

  })

);

If you have any advice on what to use, I'm a bit confused by all the operators/functions in RXJS..

Thank you in advance

My solution

    this.kycService.getDocuments(idNotif).pipe(

  switchMap(([val1, val2, val3]) => {

    this.tmp1 = val1;

    this.tmp2 = val2;

    this.tmp3 = val3;



    let newV1, newV2, newV3 = ;

      [newV1, newV2, newV3 ] = [

        this.tmp1.map(x => x.id2),

        this.tmp2.map(x => x.id2),

        this.tmp3.map(x => x.id2)

      ];

    return concat(this.service.Function2(newV1),this.service.Function2(newV2), this.service.Function2(newV3))

  }))

  .subscribe((val) => {

    //DO SOMETHING

    //val is emitted every time my function2 complete, so I manage to deal with this and rearrange my data

  })

);

Depends on your Observable types.

For hot observables (subjects, stores, etc), you will use combineLatest.

For cold observables (of, HTTP calls, from promises, etc.), you will use forkJoin.

Let's assume they're cold.

forkJoin(

  first$.pipe(

    map(result => /* transformation of your first observable */),

    switchMap(result => this.myService.getNextObservableFromFirst())

  ),

  second$.pipe(

    map(result => /* transformation of your second observable */),

    switchMap(result => this.myService.getNextObservableFromSecond())

  ),

  third$.pipe(

    map(result => /* transformation of your third observable */),

    switchMap(result => this.myService.getNextObservableFromThird())

  ),



).subscribe([r1, r2, r3] => /* What to do once all calls are completed */);

It seems that adapted to your case, it would give

forkJoin(

  first$.pipe(

    map(result => result.id2),

    switchMap(result => this.myService.Function2(result))

  ),

  second$.pipe(

    map(result => result.id2),

    switchMap(result => this.myService.Function2(result))

  ),

  third$.pipe(

    map(result => result.id2),

    switchMap(result => this.myService.Function2(result))

  ),



).subscribe([r1, r2, r3] => /* DO SOMETHING */);