How can I check returned value from put request angular

Question

I am using angular material stepper, and after each step I send data to backend. So, I have this method in me fist step, that return LeadStatusRequest the following kind:

export interface LeadStatusRequest {
    id: number;
    value: string;
    publicId: string;
}

and put method:

public submit(): Observable<LeadStatusRequest> {
    return this.dataService
        .putData(this.formData)
        .pipe(
            catchError(err => {
                const emailErrorText: string =
                    'Email address already exists. No update performed';
                if (err.error.Errors.find(error => error.includes(emailErrorText))) {
                    this.formGroup.controls.emailAddress.setErrors({notUniqueEmail: true});
                    return throwError({isSkippedNotification: true});
                }
                return throwError(err);
            }),
        );
}

So I should check if the result of submit method returns object with key "publicId", I should set it to localstorage. I try do this, but in this case I have a several put requests

public submit(): Observable<LeadStatusRequest> {
        this.dataService.putData(this.formData)
            .subscribe(res => {
            if (res.publicId) {
                this.authService.setPublicId(res.publicId);
            }
        });
        return this.dataService
            .putData(this.formData)
            .pipe(
                catchError(err => {
                    const emailErrorText: string =
                        'Email address already exists. No update performed';
                    if (err.error.Errors.find(error => error.includes(emailErrorText))) {
                        this.formGroup.controls.emailAddress.setErrors({notUniqueEmail: true});
                        return throwError({isSkippedNotification: true});
                    }
                    return throwError(err);
                }),
            )
    }

Answer 1

It looks like you want to:

• Make 1 this.dataService.putData call
• Take some conditional action based on a success response
• Handle a failed response

Your catchError operator will only run if there is an error. All you need to do is handle the success response in an operator before catchError. You can perform actions using the tap operator.

public submit(): Observable<LeadStatusRequest> {
  return this.dataService
    .putData(this.formData)    
    .pipe(
      tap(res => {
        if (res.publicId) {
          this.authService.setPublicId(res.publicId);
        }
      }),
      catchError(err => {
        const emailErrorText: string = 'Email address already exists. No update performed';
        if (err.error.Errors.find(error => error.includes(emailErrorText))) {
          this.formGroup.controls.emailAddress.setErrors({notUniqueEmail: true});
          return throwError({isSkippedNotification: true});
        }
        return throwError(err);
      }),
    );
}