title: Angular 4 Http Post put response in object
body: <p>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.</p>
  
  <p>My response looks likes this<a href="https://i.stack.imgur.com/NDJCo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NDJCo.png" alt="Response"></a></p>
  
  <p>My post request:</p>
  
  <pre><code>  postLogin(values: string): Observable&lt;string&gt; {
      let body = "username=test@test.test&amp;password=Test1234!&amp;grant_type=password";
      /*let body = values + "&amp;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);
    }
  </code></pre>
  
  <p>And my actually call to the post method:</p>
  
  <pre><code>this._loginService.postLogin(value)
          .subscribe(
            data =&gt; console.log(data),
            err =&gt; console.log(err));
  </code></pre>
  
  <p>And this does work, I do get the response in my Console<a href="https://i.stack.imgur.com/EJckj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EJckj.png" alt="Response"></a></p>
  
  <p>But how can I read my properties?</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>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.</p>
  
  <p>My new call to the post method:</p>
  
  <pre><code>console.log("username=" + this.username + "&amp;password=" + this.password);
    this._loginService.postLogin("username=" + this.username + "&amp;password=" + this.password)
      .subscribe(
        user =&gt; this.user = user),
        err =&gt; console.log(err);
  </code></pre>
  
  <p>And my new post request:</p>
  
  <pre><code>  postLogin(values: string): Observable&lt;User&gt; {
      let body = values + "&amp;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);
    }
  </code></pre>
  
  <p>With as extractData function</p>
  
  <pre><code>  private extractData(res: Response) {
      let body = res.json();
      return body.fields || {};
    }
  </code></pre>
  
  <p>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?</p>