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.

can you try setting up a stackblitz? what do you mean this is the response. where do you get the response? Also do not use string concatenation in your console.log, its way harder to read because everything will be converted as string. rather log the entire object console.log("Success: ", this.statusCode); (notice the , instead of +) — Nicolas Gehlert, May 30 '18 at 07:42

score 1 · Accepted Answer · answered May 30 '18 at 10:43

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);

HTTP Response handling in angular 2 application

1 Answers1