Using Angular's mergeMap feature to concatenate multiple HTTP calls sequentially

Question

Using Angular's mergeMap feature to concatenate multiple HTTP calls sequentially

The method called getDetails() retrieves an array of Details[]. Within this array, there is a property named name which I need to pass to another HTTP request.

Details {
    name: String;

Details

 getDetails()
     return this.https.get("/someValue")

return

{name : hello}

Information

 getInformations(name:string) {
    return this.https.get("/anotherValue"+"?"+ name)
 }

I am attempting to first call the getDetails() method and then pass the extracted name property to

Information{
  Hieght:string
  age:string
}

getInformations()
this.getDetails().pipe(mergeMap(x => 
 this.getInformations(x.name)).subscribe((inforamtionResults:Information[])=>{
  console.log("Checking Informations"+inforamtionResults.length)

return

 {height:160,
   age: 23
   }

This approach is not functioning properly as the value of x is an array. How can I iterate over the array and pass each item's property as a parameter?

angular typescript rxjs rxjs6

Answer 1

Answer №1

To achieve the desired outcome, it is necessary to iterate through each ~~this.getInformations(x.id)~~ Details. This can be accomplished by utilizing the Array.map() method. However, since mergeMap expects a single observable while we have an array of observables, we can consolidate these observables into one using rxjs' forkJoin.

this.getDetails()
  .pipe(
    mergeMap((details) =>
      forkJoin(details.map((x) => this.getInformations(x.id)))
    )
  )
  .subscribe((x) => console.log(x));

For further clarification and demonstration, refer to this sample demo. Although a different API is used, the implementation remains consistent.

Answer 2

To achieve the desired outcome, it is necessary to iterate through each ~~this.getInformations(x.id)~~ Details. This can be accomplished by utilizing the Array.map() method. However, since mergeMap expects a single observable while we have an array of observables, we can consolidate these observables into one using rxjs' forkJoin.

this.getDetails()
  .pipe(
    mergeMap((details) =>
      forkJoin(details.map((x) => this.getInformations(x.id)))
    )
  )
  .subscribe((x) => console.log(x));

For further clarification and demonstration, refer to this sample demo. Although a different API is used, the implementation remains consistent.

Answer 3

Answer №2

It is essential to attempt it in this manner.

 fetchInformation() {
    return this.http.get("/someValue")
      .pipe(
        mergeMap((x) => {
          return this.retrieveDetails(x.id)
        })
      );
  }

Answer 4

It is essential to attempt it in this manner.

 fetchInformation() {
    return this.http.get("/someValue")
      .pipe(
        mergeMap((x) => {
          return this.retrieveDetails(x.id)
        })
      );
  }

Using Angular's mergeMap feature to concatenate multiple HTTP calls sequentially

Answer №1

Answer №2

Similar questions

Developing a bespoke React Typescript button with a custom design and implementing an onClick event function

Is it Mission Impossible to Combine NodeJs, Restify, SQL Server, TypeScript, and IIS?

Using Angular's ngFor directive to iterate over a collection based on a true

An error has occurred in the tipo-struttura component file in an Angular application connected with a Spring backend and SQL database. The error message indicates that there is a TypeError where the

What is the best way to implement a switch case with multiple payload types as parameters?

The label overlay for MatInput remains fixed within the input box in an Angular form

Top tips for accessing and modifying an immutable object within a component retrieved from an RXJS/NGRX store in Angular

Is it possible for me to download npm locally using the command line? I am looking to install an older version of npm for a project that requires it

Angular 4 CanActivateChild fails to function

Creating an abstract static factory with a protected constructor in Typescript

Error in parsing: Unexpected token encountered. Expected a comma instead. Issue found in React with Typescript

An array becomes undefined once the previous array is removed

Implementing method overrides in TypeScript class objects inherited from JavaScript function-based classes

Utilizing logical operators to assign values to variables in Typescript

What is the best method for connecting a ref to a component that I am duplicating with React.cloneElement?

After integrating React Query into my project, all my content vanishes mysteriously

Utilizing the moment function within an Angular application

Vuejs fails to properly transmit data

To activate the ion-toggle, simply click on the ion-label

Tips for uploading images, like photos, to an iOS application using Appium