When invoking nested HTTP calls within a route resolver, ensure that it returns an Observable instead of

I've encountered an issue while trying to make a nested HTTP call in resolve.ts and have implemented it as shown below.

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

Here is the code for my resolver:

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 here is the code for the component:

result.component.ts

    { hnData : Observable}

Within the component, I am expecting the result from the searchListing service method but instead, I am receiving an observable.

Answer №1

initialHttpRequest(): Observable<response1>;
fetchListingData(): Observable<response2>;

// the objective is to transform:
map(Observable<response1>): Observable<Observable<response2>>

The query at hand - how can we simplify this?

RxJs offers several solutions:

1) Do we need to manage all events from each nested Observable?
mergeMap/concatMap - does event order matter?

2) Is it possible to skip certain events from the inner Observable?
switchMap/exhaustMap - does a new event take precedence?

You can substitute map with mergeMap to flatten the Observable.

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

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

        return this.service.fetchListingData(param);
  })
)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Comparing ngModules and index.tsIn the world of Angular development

Recently, I came across angular seed and noticed that they include both index.ts and modules. It got me thinking about why they use both when they can achieve the same goal of exporting TypeScript types. ...

The safeguarding of Angular2 and Laravel against CSRF vulnerabilities

I have come across some interesting articles that I've read recently. The issue I am facing revolves around this particular section of code: <meta property="csrf-token" name="csrf-token" content="{{ csrf_token() }}"> I am utilizing Angular2 a ...

What is the proper way to manage the (ion select) OK Button?

Hey there, I'm working with an Ionic select directive and I need to customize the functionality of the 'OK' button. When I click on it, I want it to call a specific function. I'm aware of the (ionChange) event, but that only triggers w ...

How can Angular Material help with CSS positioning? Are you looking to align content to the left (start), center, or right

I have experience with Bootstrap and AngularJS Material, but I am currently learning Angular Material. However, I am struggling to find options for CSS positioning like left (start), center, or right (end) for creating column layouts. One specific challeng ...

In the Angular Google Maps API, is it possible to update the attributes of <agm-marker> directly within the TypeScript code?

Currently, I am fetching markers from the database and displaying them on a map using Angular Google Maps (AGM) by utilizing the <agm-marker> tag. In my code snippet below, you can see how I fetch and store the markers in an array named markers in t ...

Angular's approach to module-specific error handling

Utilizing the ErrorHandler in Angular has been effective when working with a single module. However, when incorporating multiple modules and attempting to implement distinct error handlers within specific child modules, issues arise. In this scenario, only ...

Utilizing string to access property

Is there a better way to access interface/class properties using strings? Consider the following interface: interface Type { nestedProperty: { a: number b: number } } I want to set nested properties using array iteration: let myType: Type = ...

Guide to implementing AutoPlay functionality in React-slick using useRef hook and typescript

Presently, I have integrated "typescript": "^3.7.5" and "react-slick": "^0.25.2". The issue at hand is my inability to utilize the auto play functions slickPlay and slickPause with the new useRef hook in conjunction ...

I'm puzzled as to why the banner text for my three images in the slider is only displaying on one of the images, all crammed together

Currently, I am working on an ecommerce project with Next.js. One of the challenges I faced was while setting up my banner page that includes a react-slick slider for images. Initially, when I added just one image, I noticed multiple renderings of it, but ...

The "keyof typeof Module" function is not functioning properly with interfaces

I am trying to create a custom dynamic type that represents a union of interface symbols from a file called "MyInterfaces.ts" export interface SomeInterfaceA {} export interface SomeInterfaceB {} ... export interface SomeInterfaceZ {} The definition I am ...

Converting Vue 3 refs to different types using instanceof in Typescript

When working with Vue using the Options API, here is a code snippet I have: <script lang="ts"> import * as THREE from 'three'; export default { mounted() { console.assert(this.$refs.container instanceof HTMLCanvasElem ...

Can we find a superior method?

I am currently using a stateful service to retrieve questions. The service checks if the questions exist in the local state, and if they do, it returns them. Otherwise, it makes an HTTP call to the API to fetch and store the questions. The service method ...

What is the solution to fixing the error message "Cannot redeclare block-scoped variable 'ngDevMode' "?

I encountered this error: ERROR in node_modules/@angular/core/src/render3/ng_dev_mode.d.ts(9,11): error TS2451: Cannot redeclare block-scoped variable 'ngDevMode'. src/node_modules/@angular/core/src/render3/ng_dev_mode.d.ts(9,11): error TS2451 ...

Using parameters in routes in Angular 4

all I have created a new auxiliary website. Users will be directed to this site from the main site using a reference link like: I have set up the AppRoutingModule as follows: import { NgModule } from '@angular/core'; import { RouterMod ...

Is it better to import from a <variable> rather than a hardcoded string in TypeScript?

https://www.example.com/typescript-dynamic-import Can Typescript handle dynamically setting the import path into a variable? For example, can we transform this: import {HomeComponent} from './dashboard/home/home.component'; Into something lik ...

Retrieve validators and values from an Angular FormControl

Would you happen to know how to determine if an Angular FormControl contains a particular validator and access its value? For example, suppose I have a form control set up like this: testControl: new FormControl(null, [Validators.required, Validators.minL ...

Strategies for successfully passing mock dates as event values when unit testing in Angular

I have a function that requires date data from a datepicker event. I am using matdatepicker for selecting a date from the UI. I need help passing the date event value to my onDateSelected() function. Could someone assist me in passing the date event valu ...

Define the type as an array of any attributes from an interface

Looking for a solution: interface Details { id: string; groups: Group[]; name: string; total: number; open: boolean; debug: boolean; demo: boolean; registered: boolean; } I'm seeking a way to create an array type with property names f ...

Using Angular 2 to toggle visibility based on a select box's value

<div class="form-group"> <label class="col-md-4 control-label" for="is_present">Is Present?</label> <div class="col-md-4"> <select id="is_present" name="is_present" class="form-control" *ngIf="candidates.is_present === tr ...

The filter function fails to work on undefined values

My eyes have been fixed on this code for quite some time now... I need assistance I am currently working with a filter and trying to eliminate undefined objects from an array: .then((items) => { const filtered = items.map( i => { if (i ...