How can I access HTTP error response body in angular

Question

I want to access error response body and show the message in that array

ERROR:
Bp {headers: Op, status: 422, statusText: "OK", url: "https://abc.trade/trade/save-trade", ok: false, …}
error: Array(1)
0:
  errorArgumentsMap: null
  errorCode: "CREATE_ERROR_CODE"
  errorPropagate: null
  fieldName: ""
  message: "trade already exists with id(T4)"
  name: ""
__proto__: Object
length: 1
__proto__: Array(0)
headers: Op {normalizedNames: Map(0), lazyUpdate: null, lazyInit: ƒ}
message: "Http failure response for https://abc.trade/trade/save-trade: 422 OK"
name: "HttpErrorResponse"
ok: false
status: 422
statusText: "OK"
url: "https://abc.trade/trade/save-trade"

This is the response I get from API. Now I want to access error.error.message. Below is my code

---TS File---

this.createTrade.saveTrade(tradeData).subscribe((data: any)=>{       
        if(data.id){
          console.log('Created Sucessfully')          
        }        
      },
      error => {        
        if(error){
          let errorMsg = error.error.message;           
          console.log(errorMsg)
        }
      }
)

---service.ts---

saveTrade(request: any) {
const urlList = 'https://abc.trade/trade/save-trade';
return this.http
  .post<[]>(urlList, request, {
    headers: this.headers
  })
  .pipe(
    map(data => {
      return data;
    }),
    catchError(this.handleError)
  );

}

On sucess it is working. But on error I'm not able to read error.error.message.I even tried accessing error.error[0].message. Could you guys please advise

You can use `catchError` method and use it before you are subscribed to the obesrvable — Dmitry S., Feb 16 '21 at 14:28
It's been a while since I've really worked with Angular, but it feels like you might be missing something. I'm thinking it might be in the catchError part. Is the `this.handleError` returning your error? this might help https://stackoverflow.com/questions/47310848/catch-error-in-combined-pipe-of-lettable-rxjs-operators — Alex, Feb 16 '21 at 14:31
Could you please do a `console.log(error)` inside the `error` callback and post a screenshot? The format isn't clear at the moment. — ruth, Feb 16 '21 at 14:31

Talha Akca · Answer 1 · 2021-02-16T14:31:00.697

0

did you try

saveTrade(request: any) {
const urlList = 'https://abc.trade/trade/save-trade';
return this.http
  .post<[]>(urlList, request, {
    headers: this.headers
  })
  .pipe(
    map(data => {
      return data;
    }),
    catchError(error => {
      return of(error);
})

  );   


in ts file =>

this.createTrade.saveTrade(tradeData).subscribe((data: any)=>{       
        if(data.id){
          console.log('Created Sucessfully')          
        }        
      },
      error => {      
          console.log(error)
      }
)

edited Feb 16 '21 at 14:31

answered Feb 16 '21 at 14:28

Talha Akca

394
2
8

1

`catchError` _must_ return an observable. At the very least, your solution should say `return of(error)` inside the `catchError` block. – ruth Feb 16 '21 at 14:29
then you can you have error what's the problem ? – Talha Akca Feb 16 '21 at 14:35
ERROR TypeError: Cannot read property 'message' of undefined. I get this error if try to access the error message from error array – Prashanth Feb 16 '21 at 14:38

How can I access HTTP error response body in angular

1 Answers1