angularrxjspipefork-joinconcatmap

Get previous observable result to fork join pipe RXJS


First Http call to fetch Shipment Data IF shipment data is NOT AVAILABLE exceution will be stop with showing error

IF shipment data is AVAILABLE i need to call second and third calls paralalley

I used fork join to call paralell request and after fetching fork join data how to use shipment data inside in the fork join map method.

   from(getShipment(this.data.CardId))
              .pipe(
                filter(shipmentData => shipmentData != undefined),
                tap(shipmentData => {
                  if (shipmentData.ShipmentId === null || shipmentData.ShipmentId === "") {
                    throw "Shipment needs to be connected"
                  }
                }),
                //I NEED TO PASS THIS SHIPMENT DATA TO FORK JOIN PIPE METHOD
                map(shipmentData => shipmentData),                
                concatMap(shipmentData =>
                  forkJoin([
                    getOrderLineAllocationByCardIdObservable(this.data.CardId),
                    getLotsByCardIdObservable(this.data.CardId)
                  ])
                    .pipe(
                      filter(response => response != undefined),
                      map(([inventoryData, lotsData],shipmentData) => {
                                               
                       //I NEED TO ACCESS SHIPMENT DATA IN HERE
                       //SHIPMENT DATA NOT AVAILABLE IN HERE
        
                      })
                    )
                ),
                // Catch errors thrown above
                catchError(error => {                      
                  return EMPTY;
                }),
                // Always finish by Hiding Loading indicator
                finalize(() => this.store.dispatch(setLoadingSpinner({showLoading: false})))
              )
              .subscribe();

Solution

  • Just remove shipmentData as argument from your map function, its already there:

    import {
      of,
      map,
      Observable,
      from,
      filter,
      tap,
      concatMap,
      forkJoin,
      catchError,
      finalize,
    } from 'rxjs';
    
    // Open the console in the bottom right to see results.
    function getShipment(x) {
      return new Promise(function (res, rej) {
        res({ key: 'hi, im shipmentData', ShipmentId: 989 });
      });
    }
    
    function getOrderLineAllocationByCardIdObservable(x) {
      return of(1);
    }
    
    function getLotsByCardIdObservable(x) {
      return of(2);
    }
    
    from(getShipment(1))
      .pipe(
        filter((shipmentData) => shipmentData != undefined),
        tap((shipmentData: any) => {
          if (shipmentData.ShipmentId === null || shipmentData.ShipmentId === '') {
            throw 'Shipment needs to be connected';
          }
        }),
        concatMap((shipmentData) =>
          forkJoin(
            getOrderLineAllocationByCardIdObservable(666),
            getLotsByCardIdObservable(666)
          ).pipe(
            filter((response) => response != undefined),
            map(([inventoryData, lotsData]) => {
              console.log(shipmentData);
            })
          )
        ),
        // Catch errors thrown above
        catchError((error) => {
          return of();
        }),
        // Always finish by Hiding Loading indicator
        finalize(() =>
          // this.store.dispatch(setLoadingSpinner({ showLoading: false }))
          console.log('rdy')
        )
      )
      .subscribe();
    

    runnable example: https://stackblitz.com/edit/rxjs-t5mzxy?file=index.ts