I am facing an issue with my code that calls an API for each object in a list called "titles" and then adds the object to another list named "groupDocs". However, due to the asynchronous nature of the API response, the order of objects in the "groupDocs" list gets jumbled. What can I do to ensure that the order stays consistent?
I have been unable to find a solution to this problem as I am still new to working with Angular.
public getDetails(titles: ErrorTitleData[]): void {
for (const title of titles) {
const showButtons: boolean = false;
const details: controlErrordetailsData[] = [];
const criteria: SearchCriteriaControlData = {
aggFields: ['Famille', 'Sous-Famille', 'Date', 'Controle', 'erreur'],
page: 0,
step: 20,
selectedValues: {},
queryString: ''
};
criteria.selectedValues['Sous-Famille'] = [title.sf ? title.sf : ''];
criteria.selectedValues['Date'] = [title.dateVerif ? title.dateVerif : ''];
criteria.selectedValues['Controle'] = [title.typeVerif ? title.typeVerif : ''];
this.controlErrorService.getErrorControl(criteria).subscribe(
(data) => {
data.hits.forEach(element => {
const detail: controlErrordetailsData = new controlErrordetailsData(element);
details.push(detail);
});
this.groupDocs.push(new GroupDoc(title, details, criteria, data.total));
},
(error) => {
this.toastService.update(ToastService.TYPE_ERROR,
'An error occurred while loading the list of control errors');
}
);
}
}