Calling nested http in route Resolver return Observable instead of data

Admin 1
Viewed 573

I am trying to call nested HTTP call in resolve.ts. and implemented in the following way.

app.route.js:
    { 
     path: 'result/:start_date/:end_date', 
     component: ResultComponent,
     resolve:{hnData:ResultResolver}
    }

following is my resolver code

result.resolver.ts

   resolve(route: ActivatedRouteSnapshot) {
   return this.service.firstHttp()
     .pipe(
      map((data)=>{

      param['data_from_firstHttp']= data.result;
      param['checkinDate']=route.paramMap.get('start_date');
      param['checkoutDate']=route.paramMap.get('end_date');

      return this.service.searchListing(param);


   })
 )

and the component code

result.component.ts

    { hnData : Observable}

Here in the component, I am expecting the result from serchListing service method instead I am getting observable.

observable angular-routing angular typescript
1 Answers
firstHttp(): Observable<data1>;
searchListing(): Observable<data2>;

// you are trying to map:
map(Observable<data1>): Observable<Observable<data2>>

The question is - how to flatten it?

RxJs have a few ways:

1) Do we need to handle all events from each inner Observable?
mergeMap/concatMap - is the order of events important?

2) Can we skip some events from inner Observable?
switchMap/exhaustMap - is the new event have higher priority?

You can replace map on mergeMap to flatten Observable.

resolve(route: ActivatedRouteSnapshot) {
  return this.service.firstHttp()
    .pipe(
      mergeMap((data)=>{

        param['data_from_firstHttp']= data.result;
        param['checkinDate']=route.paramMap.get('start_date');
        param['checkoutDate']=route.paramMap.get('end_date');

        return this.service.searchListing(param);
  })
)
user_58014950
Related