Angular - Wait for subscription to complete then execute other code-CodePudding

Below is my angular function

    observeDiaryCreate(){
        this.diarySub = this.diaryService.diaryTrigger$.subscribe((dataVal: boolean) => {
            if(dataVal) {
                if(this.isEdit && this.statusId != 1) {
                    this.baseService.checkFeature('setFeature').subscribe((response: any) => {
                        if(!response) {
                            if((JSON.stringify(data1) !== JSON.stringify(data2))) {
                                this.modafRef = this.modalService.show();
                                return;
                            }
                        }
                    },
                    error => {},
                    () => {});
                }
                this.validateDiary();
            } else {
                this.onCancel();
            }
        })
    }

Here, I want to execute this.validateDiary() method, only after the inner subscribe gets executed. I am trying to stop the code execution by using return statement when a specific condition is met. But what is now happening is, both return and this.validateDiary() are being executed and first this.validateDiary() is being called even before the subscribe. How can I format my code to meet my criteria. Any help would be great. Thanks in advance.

CodePudding user response：

The reason your this.validateDiary() gets executed is because once the outer observable emits, you are subscribing to inner observable as well as calling the function, this.validateDiary(). If you need to call this.validateDiary() only when the inner observable emits, then you can do following.

observeDiaryCreate() {
        this.diarySub = this.diaryService.diaryTrigger$
            .pipe(
                filter(dataVal => dataVal && this.isEdit && this.statusId != 1), // a filter to match the condition
                switchMap(() => this.baseService.checkFeature('setFeature')) // mapped to second observable.
            )
            .subscribe(response => {
                if (!response) {
                    if ((JSON.stringify(data1) !== JSON.stringify(data2))) {
                        this.modafRef = this.modalService.show();
                        this.validateDiary();
                    }
                }
            }, error => {});
}

CodePudding user response：

Why don't you add it at Location 1 or Location 2.

    this.baseService.checkFeature('setFeature').subscribe((response: any) => {
                               //Location 1
                                if(!response) {
                                    if((JSON.stringify(data1) !== JSON.stringify(data2))) {
                                        this.modafRef = this.modalService.show();
                                        return;
                                    }
                                }
                            },
                            error => {},
                            () => {
                                  //Location 2
                                   });

CodePudding user response：

"I dont want it to be executed inside if(this.isEdit && this.statusId != 1)"

As per this comment I guess you want to run this.validateDiary(); relardless of the condition. But still you want subscription within to complete before calling this.validateDiary()

Just a simple hack. If you closely look

if this.isEdit && this.statusId != 1 is true then this.validateDiary(); within the subscription will be called. Also this.validateDiary(); will be called after the sunscription completion

if this.isEdit && this.statusId != 1 is false then this.validateDiary(); within the else condition will be called

observeDiaryCreate(){
        this.diarySub = this.diaryService.diaryTrigger$.subscribe((dataVal: boolean) => {
            if(dataVal) {
                if(this.isEdit && this.statusId != 1) {
                    this.baseService.checkFeature('setFeature').subscribe((response: any) => {
                        if(!response) {
                            if((JSON.stringify(data1) !== JSON.stringify(data2))) {
                                this.modafRef = this.modalService.show();
                            }
                        }
                        this.validateDiary();
                    },
                    error => {},
                    () => {});
                } else {
                   this.validateDiary();
                }
            } else {
                this.onCancel();
            }
        })
    }