HTTP Response handling in angular 2 application

Question

Working with angular 2 HTTP PUT request. I have a component and service. In the component I make request to update the attributes of account. It then calls the Service to update the account through an API. On response I am trying to receive the status code and status message from response.

This is code for service,

let headers = new Headers({ 'Content-Type': 'application/json' }); // ....Set content type to JSON
      let options = new RequestOptions({ headers: headers });
      return this.http.post((('http://192.168.16.89:')+this.globalData.port1+('/api.spacestudy.com/spacestudy/') +
                           this.globalData.institutename + ('/admin/account/saveattributes')),
       this.account, options)
        .map((success: Response )=>this.success=success.status,
        )

        .catch(this.handleError);
    }

   private handleError (error: Response | any) {
  this.errorStatus=error.status;
  console.error(error.message || error);
  return Observable.throw("error status is "+this.errorStatus);
    }

This code for component class,

this.accountDetailService.updateAccountData(this.nAccountId,this.nDeptId,this.sLocation,this.nAccountCPCMappingid,
      this.nInvestigatorId,this.sAcctDesc,this.sClientAcctId)
      .subscribe(successCode => {
         this.statusCode= successCode;
        console.log("Success: "+ this.statusCode);
       console.log("Successfully Updated")
         },
    errorCode => {this.statusCode = errorCode;
       console.log("Error code is : "+ this.statusCode);
    });

This is my html code where I am trying to print status code with specific message,

<div *ngIf="statusCode" >
     <div *ngIf="statusCode === 200" class="successResponse" [ngClass] = "'success'">
        Account Updated successfully.
   </div> 
   <div *ngIf="statusCode === 404" class="errorResponse" [ngClass] = "'error'">
        Data Retrieval Failure
   </div>       

   <div *ngIf="statusCode == 405" class="errorResponse"  [ngClass] = "'error'">
        REquested Method type not supported.
   </div>          
   <div *ngIf="statusCode === 406"  class="errorResponse" [ngClass] = "'error'">
        You can not pass null parameter.
   </div>
   <div *ngIf="statusCode === 500" class="errorResponse"  [ngClass] = "'error'">
       Internal Server Error.
   </div>   
 </div>

this is response I am getting,

Response {_body: "{"statusCode":405,"message":"You cannot make this …estudy/rockefeller/admin/account/saveattributes"}", status: 405, ok: false, statusText: "OK", headers: Headers, …}
headers
:
Headers {_headers: Map(4), _normalizedNames: Map(4)}
ok
:
false
status
:
405
statusText
:
"OK"
type
:
2
url
:
"http://192.168.16.89:8081/api.spacestudy.com/spacestudy/rockefeller/admin/account/saveattributes"
_body
:
"{"statusCode":405,"message":"You cannot make this request - the method is not allowed!","status":"Request method 'POST' not supported","error":"/api.spacestudy.com/spacestudy/rockefeller/admin/account/saveattributes"}"
__proto__
:
Body

I am not getting proper way to extract data from response. My response is correct but I unable to access it on browser. Please anyone clear my doubts and guide to solve my issue.

Answer 1

I solved this issue. There was error in import statement of throw. Also I little bit modified my Errorhandler method like below,

private handleError (error: Response | any) {
  this.errorStatus=error._body;
  console.error(error._body|| error);
  return Observable.throw(error.status);