How can I efficiently nest API calls in Angular using RxJS?
getProducts(): Observable<any> {
return this.getProductIDs().pipe(
map((response) =>
response.products.map((data) => (item: any) =>
flatMap(() => this.getProduct(item.id))
)
)
);
}
// With promises, we can use promise.all([])... How can I achieve something similar using RxJS?
However, the above method is producing the following output:
[ƒ, ƒ, ƒ, ƒ, ƒ, ƒ, ƒ]
If I try the following approach:
getProducts(): Observable<any> {
return this.getProductIDs().pipe(
map((response) =>
response.products.map((item: any) => this.getProduct(item.id))
)
);
}
It results in:
[Observable, Observable, Observable, Observable, Observable, Observable, Observable]
Does anyone have a suggestion on how to map the results from one observable to a nested API call (returning an observable)?
NOTE
getProduct() is also an API call that returns an observable.
getProduct(id): Observable<any> {
return this.http.get<Observable<any>>(
`http://localhost:4401/api/products/${id}`,
{
params: { id },
}
);
}