What is the best professional way to detect the status of several ajax requests in Angular8?

Question

The one completed variable is consisted of 6 parts like the following

selectedCandidateData: Candidate = {
    candidateBasic: null,
    experienceList: null,
    educationList: null,
    certificationList: null,
    candidateAbout: null,
};

each parts will get by each ajax calling like the following

// get the profile data of selected candidate
this.candidateService.getBasic(candidatePersonalInfo.id).subscribe(
    (candidateBasic) => {
        this.selectedCandidateData.candidateBasic = candidateBasic;
    },
    (error) => {
        console.log(error);
    }
);

this.candidateService.getExperience(candidatePersonalInfo.id).subscribe(
    (experienceList) => {
        this.selectedCandidateData.experienceList = experienceList;
    },
    (error) => {
        console.log(error);
    }
);

this.candidateService.getEducation(candidatePersonalInfo.id).subscribe(
    (educationList) => {
        this.selectedCandidateData.educationList = educationList;
    },
    (error) => {
    console.log(error);
    }
);

this.candidateService.getCertification(candidatePersonalInfo.id).subscribe(
    (certificationList) => {
        this.selectedCandidateData.certificationList = certificationList;
    },
    (error) => {
        console.log(error);
    }
);

this.candidateService.getAbout(candidatePersonalInfo.id).subscribe(
    (candidateAbout) => {
        this.selectedCandidateData.candidateAbout = candidateAbout;
    },
    (error) => {
        console.log(error);
    }
);

as you see at the above, selectedCandidateData will be made after 6 ajax calling. I made the following function to detect the all 6 ajax request success.

selectedCandidateDataLoaded() {
    return (
        this.selectedCandidateData.candidateBasic !== null &&
        this.selectedCandidateData.experienceList !== null &&
        this.selectedCandidateData.educationList !== null &&
        this.selectedCandidateData.certificationList !== null &&
        this.selectedCandidateData.candidateAbout !== null
    );
}

so at the template, for rendering I used like the following code

<app-candidate-profile *ngIf="selectedCandidateDataLoaded()" [candidate]="selectedCandidateData"></app-candidate-profile>

as I see, my current solution is very bad and doesn't look very professional. for improving my code, I reviewed about Angular8 and I find Rxjs. it seems that Rxjs can help me to make my code simple and looks very professional.

How can I make this simple and professional?

Answer 1

You can use the forkJoin operator for your use case in two flavors :

1 - In your component constructor or ngOnInit do the following :

forkJoin(
  {
    candidateBasic: this.candidateService.getBasic(candidatePersonalInfo.id),
    experienceList: this.candidateService.getExperience(candidatePersonalInfo.id), 
    educationList: this.candidateService.getEducation(candidatePersonalInfo.id),
    certificationList: this.candidateService.getCertification(candidatePersonalInfo.id),
    candidateAbout : this.candidateService.getAbout(candidatePersonalInfo.id)
  }
)
.subscribe(e => this.selectedCandidateData = e)

And in your template use selectedCandidateData variable instead of selectedCandidateDataLoaded()

Or

2 - write directly the forkJoin inside selectedCandidateDataLoaded() method and don’t subscribe.

selectedCandidateDataLoaded() : Observable<Candidate> {
   return forkJoin({...});
}

In your template use async pipe like :

*ngIf="selectedCandidateDataLoaded() | async"