Angular 4 Http Post put response in object

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?

As said, read the docs... Here's your answer: https://angular.io/docs/ts/latest/guide/server-communication.html#!#extract-data :) But I *highly* recommend to read the whole thing ;) — AT82, May 17 '17 at 19:10
Read the docs, as said! Regardless of post method, you'll need to parse the JSON response. Do it here on the return value in your service `return this._http.post(this._postLoginUrl, body, options).map(res => res.json())` — joh04667, May 17 '17 at 19:18
As @joh04667 said, you must deserialize using .json() method on response — Yeysides, May 17 '17 at 19:23
I don't think `body.fields` will be defined... based on your console log from before, your key options are `access_token` etc... try console.log(body) after the deserialize. — chrispy, May 17 '17 at 20:52
If you want the list of keys in the JSON, try `Object.keys(body)`. It's not at all clear what you expected `.fields` to be. — jonrsharpe, May 17 '17 at 20:59
You could use a [typed response](https://stackoverflow.com/a/49741323/2093371): — hestellezg, Jun 06 '18 at 20:57

score 2 · Answer 1 · answered May 17 '17 at 21:59

2

Use

JSON.parse(data._body)

this will give you the response object.

answered May 17 '17 at 21:59

BlackJair

63
1
6

score 1 · Answer 2 · answered May 18 '17 at 07:31

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

Angular 4 Http Post put response in object

2 Answers2