Angular 4-5 HttpClientModule display data

Question

With HttpModule I used this code to get data from Express.js REST API:

getArticles() {
  this.http.get('http://localhost:3000/api/articles')
    .map(res => res.json()).subscribe(res => this.articles = res);
}

After that I would display the result in the template using binding.

Now, with HttpClientModule, I can't figure out how to do that. The documentation suggests using something like

this.httpClient.get('http://localhost:3000/api/articles')
  .subscribe(data => { this.results = data['results']; });

But it doesn't work.

Christian Santos · Accepted Answer · 2017-12-07 02:43:34Z

1

HttpClientModule works almost the same as the older HttpModule. The default responseType for HttpClient is json, so you would skip the step of converting your response to json and instead use your response directly like you did before:

this.httpClient.get('http://localhost:3000/api/articles')
    .subscribe(data => this.results = data); // result is passed directly

answered Dec 7, 2017 at 2:43

Christian Santos

5,4551 gold badge20 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

mohsenmadi · Accepted Answer · 2017-12-07 02:46:29Z

1

HttpClient works best when you cast the returned data. See this link where a complete mini project is setup to show how to get and display data.

answered Dec 7, 2017 at 2:46

mohsenmadi

2,3972 gold badges27 silver badges37 bronze badges

Comments

Akash · Accepted Answer · 2017-12-07 06:04:49Z

1

this.httpClient.getArticles().subscribe(data => this.results = data);

answered Dec 7, 2017 at 6:04

Akash

93 bronze badges

Collectives™ on Stack Overflow

Angular 4-5 HttpClientModule display data

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related