I've been diving into the wonders of RxJS's .merge lately, but I thought I'd throw my question out here too because the explanations are usually top-notch.
So, here's the scenario: I have a form that triggers a modal window based on user input. I listen for the modal close event, pass some data back, then make a service call to fetch more data. After that, I do it all over again with another service method to update some info, followed by running a local method. Essentially, I've got a chain of 3 nested .subscribe
s going on.
const dialogRef = this.matDialog.open(ModalWindowComponent, {});
let userId = 4;
let userData = {};
// dialog is closed
dialogRef.afterClosed().subscribe((result) => {
if (typeof result === 'string') {
// get some data from a service
this.userService.getUser(userId).subscribe((user: any) => {
let mergedObj = Object.assign({}, user, {newProperty: result});
// update the data using another service
this.scbasService.updateUser(userId, mergedObj).subscribe(() => {
this.doSomethingElse(userData);
});
});
}
});
This structure is often referred to as the "pyramid of doom". In AngularJS days with promises, we used chained .then()
s to avoid this. How can I flatten out my code here to reduce excessive indentation?
If you have any suggestions or need further clarification, feel free to let me know so I can refine my question.