how to sequence run multiple observables with different data types and logics

Question

hello guys in my case i have a form that includes multiple select types,options of these inputs come form API and then feed the emitted data from HTTP request observable to my FormGroup every thing works fine by now.

then decided to add edit feature to my app, so user can edit related entity with the same component. so i need to run two observable one after each and i need to first one to be completed to run another one.

it means i need to call getFormFieldData form my service feed its emitted value to my formGroup then after this i need to call getUserEntityData() and feed its emitted data to my formGroup initial value, after this user can start editing.

there must be a rxjs operator to do this i read some articles about concat but types of my emitted data are different and also the logic.

tnx for helping me.

Answer 1

Your looking for switchMap on the high level it will look like

doAction() {
    // disable form
    this.service.getFormFieldData().pipe(
       switchMap((response) => {
           this.formGroup.patchValue(response);
           return this.service.getUserEntityData().pipe(
               map((response2) => {
                    this.formGroup.patchValue(response2);
               })
           );
       })
    ).subscribe(() => {
        // enable form
    });
}