How to combine multiple API calls into an array of Observable from an array of some values?

Question

I am working on the form given below : The Form is composed of three sub-forms :
- PersonInfo Form
- Communication Info Form
- Address Form

The DTO I have created for the form looks like this :

PersonalInformationEmergencyEditorresponse {
  address : AddressCreateDto[];
  communicationInfo : CommunicationCreateDto[];
  profileInfo: PersonProfileCreateDto;
}

But the rest endpoint for which this form is created accept the payload like this :

export interface PersonToPersonLinkCreateDto {
  emergencyContact: boolean;
  linkedPersonId: string;
  relation: string;
}

So the workflow for creating this form is something like this.
Step 1: Fetch Info From the form.
Step 2: Extract AddressInfo, Communication Info, And Personal Info from the form response.
Step 3: Now from Personal Info do a post call and it will return profileId as a response.
Step 4: Create an Address record with the profileId you get in response from last Step 3.
Step 5: Create a Communication record with the profileId you get in from Step 3.
Step 6: Create a linked record with profileId got in response from step 3.

So in order for a single form, I have to make 4 API calls to different endpoints.

Also, there could be multiple records which means I can have an array of these forms I described above.

I am able to handle this part but the part where I am confused is when I will do get call to show information for the form.

I will get a response as an Array below :

export interface PersonToPersonLinkCreateDto {
  emergencyContact: boolean;
  linkedPersonId: string;
  relation: string;
}

Now in order to fill the info in the form again, I have to make the below calls

// For each EmergencyContact
({linkedPersonId} :  PersonToPersonLinkCreateDto[]).map (
   // fetch PersonalInfo
  this.personalInfoApiService.get(linkedPersonId)
   // fetch Address
  this.personlInfoApiService.getAddress(linkedPersonId)
  // fetch Communication Info
  this.personalInfoApiService.getCommunicationInfo(linkedPersonId)
)

So for each Person in emergency contact, I have to fetch the corresponding records and then put them again in this form so that I can patch it to the form.

PersonalInformationEmergencyEditorresponse {
  address : AddressCreateDto[];
  communicationInfo : CommunicationCreateDto[];
  profileInfo: PersonProfileCreateDto;
}

What I want to know is how to write a function which will iterate over the array of EmergencyContacts and one by one make 3 API calls for each item and then map the response of all endpoints into PersonalInformationEmergencyEditorresponse. And then push this PersonalInformationEmergencyEditorresponse into an Array.

getEmergencyContactResponse(emergencyContacts: PersonToPersonLinkCreateDto[]) :  
 PersonalInformationEmergencyEditorresponse[] {

// Function Here 
// Iterate Over PersonToPersonLinkCreateDto Array
// Make call to AddressEndpoint
// Make call to CommunicationEndpoint
// Make call to PersonInfoEndpoint
// Map response of all API calls into an Object and then push it into an Array
}

I don't know exactly how to iterate and make calls and then combine the result of calls into an Object and then push them into an Array.

Please let me know if there is any ambiguity in question I will clarify

Hitmands · Accepted Answer · 2019-07-01 07:28:59Z

forkJoin and mergeMap should do the job...

const { mergeMap } = rxjs.operators;
const { forkJoin, Subject, from } = rxjs;

const fetchPersonalInfo = (person) => Promise.resolve(`${person.id} personal info loaded`);
const fetchCommunicationInfo = (person) => Promise.resolve('communication info loaded');
const fetchAddress = (person) => Promise.resolve('address loaded');

const persons$ = new Subject();

persons$.pipe(
  // flatten the list of persons
  mergeMap(list => list),
  
  // for each person fork requests and join responses
  mergeMap(
    (person) => forkJoin({
      personalInfo: fetchPersonalInfo(person),
      communicationInfo: fetchCommunicationInfo(person),
      address: fetchAddress(person),
    }),
  ),
).subscribe(console.log);

persons$.next(
  [
    {
      id: 1,
      address: [],
      communicationInfo: [],
      profileInfo: {},
    },
    {
      id: 2,
      address: [],
      communicationInfo: [],
      profileInfo: {},
    },
    {
      id: 3,
      address: [],
      communicationInfo: [],
      profileInfo: {},
    }
  ]
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.5.2/rxjs.umd.js" integrity="sha256-mNXCdYv896VtdKYTBWgurbyH+p9uDUgWE4sYjRnB5dM=" crossorigin="anonymous"></script>

Collectives™ on Stack Overflow

How to combine multiple API calls into an array of Observable from an array of some values?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related