title: Parse error return from HTTP catch - Angular 2
body: <p>I have achieved to get the value of the API error return via catch in my HTTP Request. My problem now is how can I get the return value of the HTTP catch in my component when I call the service.</p>
  
  <p>This is my code in my HTTP service:</p>
  
  <pre><code>login(username,password){
          let headers = new Headers();
          headers.append('Content-Type','application/json');
  
          return this.http.post(this.configEnvironment.url() + "oauth/access_token",
              JSON.stringify(
                  {
                      username: username,
                      password: password,
                      grant_type: "password",
                      client_id: "xxxx",
                      client_secret: "xxxxx"
                  }
              ),
              { headers }
          )
          .map(res =&gt; res.json())
          .catch((err:Response) =&gt; {
              let details = err.json();
              return Observable.throw(new Error(details));
           });
  
       }
  </code></pre>
  
  <p>This is my code in my login.component:</p>
  
  <pre><code>this.loginService.login(this.model.username,this.model.password)
              .subscribe(
                  data =&gt; console.log("data"),
                  error =&gt; {
                     console.log(error);
                  },
                  ()  =&gt;  console.log("Finished")
              );
  </code></pre>
  
  <p>and in the chrome developer tools this is the return of the console.log:</p>
  
  <pre><code>Error: [object Object](…)
  </code></pre>
  
  <p>But the actual return of the http service catch is this:
  { "error":"invalid_credentials","error_description": "invalid credentials" }
  and this is I want to get in the login.component </p>