CODEWITHSUNDEEP
angularhttp-error
analuspi
analuspi

Reputation: 185

How to output error 400 details at frontend with Angular

I'm getting an error response to a search form and I would like to display the details of this error for the user in the Angular frontend.

This is the JSON code response that I get in the Devtools network tab:

      {
    "schemas":["urn:ietf:params:scim:api:messages:2.0:Error"],
    "details":["Invalid query: prefixed wildcard must have at least 3 chars can not be used with field 'email'"],
    "status":400
    }

This is my code from search.component.ts:

  triggerFeedback(type, translPath, errObject): void {
    switch(type) {
      case 'success':
        this.translate.get(translPath).subscribe((msg: string) => {
          this.UxFeedbackService.nzMessageFeedback(type, msg);
        });
        break;
      case 'error':
        this.translate.get(translPath).subscribe((translObj: object) => {
          this.UxFeedbackService.nzModalFeedback(type, translObj, errObject);
        });
        break;
    }
  }

  submitIdForm(): void {
    this.tableLoadingText = "SEARCH.RESULT.LOADING-SEARCH";
    this.isTableLoading = true;
    let searchFormObj = this.searchByIdForm.getRawValue();

    this.scimB2bService.getUserById(searchFormObj.id).subscribe((res: IB2bScimUser) => {
      this.userList = [res];
      this.mapUsers(this.userList);
      this.triggerFeedback('success', 'SEARCH.STATUS.SUCCESS.SEARCH-BY-ID', null);
    }, error => {
      this.isTableLoading = false;
      this.triggerFeedback('error', 'SEARCH.STATUS.ERROR.SEARCH-BY-ID', error);
    });
  }

The errObject and the error arent't getting the right object with the response details!! How can I get it?

Upvotes: 0

Views: 807

Answers (2)

username
username

Reputation: 11

Assuming you are calling some API which searches and on failure , you want the details to be printed on screen, you can do this:

you can capture the error in a local var like this

  this.serviceName.functionName().subscribe((response: any) => {
          //Do something if search is successful
          },
            err => {
              target = err['details'];
            })

then just print the target on front end using string interpolation like {{target}}

Upvotes: 1

Eli Porush
Eli Porush

Reputation: 1547

you probably using rxjs so you can use catchError pipe and then you get the error, and you can display it to the user - for example:

someObservableSendingTheForm().pipe(catchError(
 err => {
  openDialog(err.details)    // passing the text to the dialog
  throw err;
 }
))

Upvotes: 1

Related Questions