Angular 4 Http Post将响应放入对象

Question

I'm using Angular 4 combined with an Asp.net web api. I don't know how I can read the properties of my respond.

My response looks likes this

My post request:

  postLogin(values: string): Observable<string> {
    let body = "username=test@test.test&password=Test1234!&grant_type=password";
    /*let body = values + "&grant_type=password";*/
    let headers = new Headers({'Content-Type': 'application/x-www-form-urlencoded'});
    let options = new RequestOptions({headers: headers});

    return this._http.post(this._postLoginUrl, body, options)
      .catch(this.handleError);
  }

And my actually call to the post method:

this._loginService.postLogin(value)
        .subscribe(
          data => console.log(data),
          err => console.log(err));

And this does work, I do get the response in my Console

But how can I read my properties?

UPDATE

I've updated my code a bit but it still doesn't work like I want to, I did read the documentation but I still couldn't get further.

My new call to the post method:

console.log("username=" + this.username + "&password=" + this.password);
  this._loginService.postLogin("username=" + this.username + "&password=" + this.password)
    .subscribe(
      user => this.user = user),
      err => console.log(err);

And my new post request:

  postLogin(values: string): Observable<User> {
    let body = values + "&grant_type=password";
    let headers = new Headers({'Content-Type': 'application/x-www-form-urlencoded'});
    let options = new RequestOptions({headers: headers});

    return this._http.post(this._postLoginUrl, body, options)
      .map(this.extractData)
      .catch(this.handleError);
  }

With as extractData function

  private extractData(res: Response) {
    let body = res.json();
    return body.fields || {};
  }

If I do a console log of my user object now, I get undefined and if I try to access a property of user, my browser starts refreshing. What I am doing wrong, why can't I access my data?

Answer 1

Use

JSON.parse(data._body)

this will give you the response object.

Answer 2

As you can see from your response,

{"access_token":"blaablaa", .... }

there is not any fields in your data that you are receiving, but "just" an object with properties. Since there is no fields , therefore you should only return the actual response:

private extractData(res: Response) {
  let body = res.json();
  return body || {}; // remove 'fields'
}

And when you are receiving your data you can easily access the fields

this._loginService.postLogin(value)
    .subscribe(data => {
       console.log(data.access_token) // your access_token
    })