I am having a coding issue where I need certain requests to run sequentially, but some of the responses are observables. The data is mainly retrieved except for two requests that need to be executed in a loop for each account. I am using concatMap and forkJoin methods to handle this, but now I am stuck on how to extract the data from these observable responses without nested subscriptions...
this.subscriptions.push(
this.service1
.subscribeToHouseholdId()
.pipe(
concatMap((householdId: number) => {
return forkJoin([this.service2.getAccounts(householdId), this.service3.getTemplates()]);
}),
concatMap(([accountResponse, templates]) => {
return observableOf(
accountResponse?.results.map((account) => {
return forkJoin([
this.service3.getData1(account.id),
this.service3.getData2(account.id)
]);
})
).pipe(
map((data) => {
return [data, accountResponse, templates];
})
);
})
)
.subscribe(([data$, accountResponse, templatesResponse]) => {
const accountResults = accountResponse as IAccount;
const templates = templatesResponse as ITemplate;
const templatesData = this.filterTemplatesData(templates);
accountResults?.results.forEach((account, index) => {
const { instruction, brokerage } = data$[index];
const tableData = instruction as IInstruction[];
const bepData = brokerage as IPlan;
});
});
);
At the bottom part of the code, 'instruction' and 'brokerage' are observed instead of having the actual data. How can I retrieve the data from these observables efficiently without using nested subscriptions?