How to handle 400 bad request with response in ionic 2 / angular 2
<p>I have an ionic 2 app with a login page. In my login page I have a function (<code>doLogin()</code>) that is hit when the user clicks on the login button.</p>

<p>When I provide the correct username and password, I get a response and I can store the access_token in my storage. The problem is, that when I enter wrong credentials, the server returns a 400 error, with a json respons:</p>

<pre><code>{
  "error": "invalid_grant",
  "error_description": "The user name or password is incorrect."
}
</code></pre>

<p>How can I capture the error_description so that I can display that to the user?</p>

<p>The function in my login page looks like this:</p>

<pre><code>doLogin(){
    this.authService.getAccessToken(this.userName, this.password, response =&gt; {
    console.log("My response: " + response);
      if(response.access_token != null) {
        this.storage.set('access_token', response.access_token).then(() =&gt; {
          console.log('Token is set');
          this.navCtrl.setRoot(HomePage);
        });
      }
      else {
        alert("To bad for you");
      }
   });
}
</code></pre>

<p>The service that is called is this:</p>

<pre><code>getAccessToken(usr:string, pwd:string, callback){
    let headers = new Headers();
    headers.append('Accept', 'application');
    headers.append('Content-Type', 'application/x-www-form-urlencoded');

    var data = "grant_type=password" 
                + "&amp;username=" + usr
                + "&amp;password=" + pwd

    let options = new RequestOptions({ headers: headers});

    this.http.post(authTokenUrl, data, options)
        .map(response =&gt; response.json())

        .subscribe(
            (response) =&gt; callback(response),
            (err) =&gt; callback(err.status)
        ),error =&gt; {
            console.log("Oooops!");
        }, () =&gt; {
            console.log("To Bad");
    };
}
</code></pre>