RxJS : How to get output from Outer & Inner Observable in Angular

Issue

I have subscribed to queryparams from which I get the item code. How can we get the data from getItemDetails & getSecuredData together

Instead of using several subscribe(). I have used mergeMap operator

this.route.queryParams.pipe(mergeMap( params => {
      const itemCode = params.ItemCode
      return this.dataService.getItemDetails(itemCode)
             .pipe(mergeMap((ItemData) => {
               console.log(ItemData)   // I can see the Item Data
               return this.dataService.getSecureData(itemCode)
             }))
    })).subscribe( response => {
        console.log(response)    // It's blank (Ideally I should get the Item 
                                    Data & SecuredData)
    })

Is there anything I'm passing ?

Solution

You can map the outer observable data with inner observable like this to have the final output of the observable which will have outer observable data as well as inner observable:

this.route.queryParams
        .pipe(

          //AS PER YOUR NEED YOU CAN USE SWITCHMAP as well
          mergeMap(params => {
                    const itemCode = params.ItemCode
                    return this.dataService.getItemDetails(itemCode)                               
                  }),
          //AS PER YOUR NEED YOU CAN USE SWITCHMAP as well
          mergeMap(itemDetails => {
            return this.dataService.getSecureData(itemCode)
                       .pipe(
                         map(secureData => {
                           return {itemDetails, secureData};
                         })
                       )
          })
        )
    .subscribe( response => {
        //response will have an object which will have two properties 
        //{itemDetails, secureData}
        console.log(response) 
    });

Hope it helps.

Answered By - user2216584