Angular 9 service nested http requests

Question

I need to do a query to 2 separate endpoints to provide the objects needed for my component.

No	Endpoint	Response
1	`/registry/colors`	`{"colors":["red","green","blue","orange"]}`
2	`/color/{colorName}`	`{"name":"red", "details":["detail1","detail2", "detail3"]}`

For each color in the colors array, I need to call the color details endpoint and collect all of those color details into an array of Colors.

getColors(): Observable<Color[]> {
  return this.http.get<ColorRegistry>(this.registryUrl).pipe(
    map((registry:ColorRegistry) => registry.colors.concatMap((colorName: string) => {
      return this.http.get<Color>(this.colorUrl+"/"+colorName);
    }))
  )
}

I would like the above method to return the following:

[
 {"name":"red", "details":["detail1","detail2", "detail3"]},
 {"name":"green", "details":["detail1","detail2", "detail3"]},
 {"name":"blue", "details":["detail1","detail2", "detail3"]},
 {"name":"orange", "details":["detail1","detail2", "detail3"]}
]

Obviously I'm going about this the wrong way, I'm looking for the correct way to do the nested requests with observables.

Barremian · Accepted Answer · 2021-07-27 20:22:44Z

2

You are in the right direction.

Try the following changes.

Replace the map operator with a higher order mapping operator like switchMap.
Use JS Array#map and replace each entry in the colors array property with the response from the second call.
Use forkJoin to trigger the requests in parallel and merge the results in the end.

getColors(): Observable<Color[]> {
  return this.http.get<ColorRegistry>(this.registryUrl).pipe(
    switchMap((registry: ColorRegistry) => {
      return forkJoin(
        registry.colors.map((colorName: string) => 
          this.http.get<Color>(`${this.colorUrl}/${colorName}`)
        )
      ) as Observable<Color[]>;    // <— assert type here
    })
  );
}

edited Jul 27, 2021 at 20:22

answered Jul 27, 2021 at 15:40

Barremian

31.2k4 gold badges37 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Joel Over a year ago

This is telling me that Observable<unknown[]> is not assignable to type 'Observable<Color[]>'.

Barremian Over a year ago

@Joel: I’ve adjusted the post to add type assertion.

Aviad P. · Accepted Answer · 2021-07-27 15:42:25Z

0

registryUrl = '/registry/colors';

colorUrl(color) {
  return `/color/${color}`;
}

return this.http.get<ColorRegistry>(this.registryUrl).pipe(
  map(registry => from(registry.colors))
  forkJoin(color => this.http.get<Color>(this.colorUrl(color)))
);

answered Jul 27, 2021 at 15:42

Aviad P.

32.8k15 gold badges111 silver badges126 bronze badges

1 Comment

Joel Over a year ago

This is telling me Argument of type 'Observable<never>' is not assignable to parameter of type 'OperatorFunction<unknown, Color[]>'.

Collectives™ on Stack Overflow

Angular 9 service nested http requests

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related