Angular's new http client error Cannot read property 'data' of undefined

Question

I am learning how to use angular's new http client module. I get the error Cannot read property 'data' of undefined when I try to consume the rest api. Here's my app.html,

<div style="text-align:center">
  <h1>
    Welcome to {{title}}!
  </h1>
  <button (click)="getPosts()">Get Posts</button>
  <div *ngFor="let result of results.data">

      {{ result | json }}

    </div>
</div>

Here's my app.component.ts

import { Component, OnInit } from '@angular/core';
import {HttpClient} from '@angular/common/http';

interface ItemsResponse {
  data: any[];
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit {
  results: any;
  // Inject HttpClient into your component or service.
  constructor(private http: HttpClient) {}
  title = 'School2College';

  ngOnInit(): void {
  }
  getPosts() {
    this.http.get<ItemsResponse>('https://reqres.in/api/users?page=3').subscribe(res =>
      this.results = res);
  }
}

Why do I get the error Cannot read property 'data' of undefined?

Sajeetharan · Accepted Answer · 2017-10-26 08:42:38Z

5

Since you are making a asynchronous request, initially results will be undefined, use a safe navigation operator to check if the results exists and then access the data

<div *ngFor="let result of results?.data">
      {{ result | json }}
 </div>

answered Oct 26, 2017 at 8:42

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

4 Comments

Karty Over a year ago

what is safe navigation operator? can you explain a bit more?

Sajeetharan Over a year ago

Safe navigation operator can be used to prevent Angular from throwing errors, when trying to access object properties of objects that don't exist.

Sajeetharan Over a year ago

better way of doing what? you can alternatively use ngIF also, but this would be better option

Karty Over a year ago

Thanks sanjeetharan. Answer accepted. Would be nice if you vote my question up?

Vivek Doshi · Accepted Answer · 2017-10-26 08:57:21Z

3

Issue is same as explained by @Sajeetharan :

Since you are making a asynchronous request, initially results will be undefined,

You can solve it by 2 ways :

1) Provide some initial value from the very beginning:

export class AppComponent implements OnInit {
    results:Array<any> = []; // code changed
    ...
    getPosts() {
        this.http.get<ItemsResponse>('https://reqres.in/api/users?page=3').subscribe(res =>
        this.results = res.data); // code changed
    }
}


<div *ngFor="let result of results">
   {{ result | json }}
</div>

2) Use safe navigation operator

<div *ngFor="let result of results?.data">
    {{ result | json }}
</div>

But it's standard practice to use the second way.

answered Oct 26, 2017 at 8:57

Vivek Doshi

58.8k12 gold badges120 silver badges126 bronze badges

5 Comments

Karty Over a year ago

Thanks it worked. but i would like to access the getposts() method from a service and then subscribe back to that function from app.component.ts?

Karty Over a year ago

Thanks voted up. would be nice if you can vote my question.

Vivek Doshi Over a year ago

Service : getPosts() { return this.http.get<ItemsResponse>('reqres.in/api/users?page=3').map(res => res.json()); } Component : this.postService.getPosts().subscribe(res => this.results = res.data );

Karty Over a year ago

Thanks for your answer :)

Karty Over a year ago

There is no need to convert to json with res.json

Sonu kumar · Accepted Answer · 2017-10-26 08:52:12Z

0

Cannot read property 'data' of undefined simply means that results in not defined. Put console.log or apply breakpoints and try to find out why its not getting defined. When we apply breakpoints we can find out the exact reasons why it is not getting defined. Knowing the reason is important.

edited Oct 26, 2017 at 8:52

answered Oct 26, 2017 at 8:46

Sonu kumar

505 bronze badges

Collectives™ on Stack Overflow

Angular's new http client error Cannot read property 'data' of undefined

3 Answers 3

4 Comments

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related