angular 4 cannot read property 'id' of undefined

Question

i'm trying to use angular 4 to call to a dummy web api, here is my component

export class AppComponent {
    title = 'app';
    url = 'https://api.ipify.org/?format=json';
    results: any;

    constructor(private http: Http) {
        this.getData().subscribe(data => {
            this.results = data.json();
        })
    }

    getData() {
        return this.http.get(this.url);
    }

}

but when i try to display it i get the result but also a screen of error

ERROR TypeError: Cannot read property 'ip' of undefined

what i want to understand is why it is shown because after a split second the data is well displayed .

Possible duplicate of [Angular2 - error if don't check if {{object.field}} exists](https://stackoverflow.com/questions/34910928/angular2-error-if-dont-check-if-object-field-exists) — Mario Petrovic, Jul 11 '17 at 14:08

score 9 · Accepted Answer · answered Jul 11 '17 at 14:03

In your *ngFor you can change it to *ngFor="let r of results | async"

Your problem is that the data isn't there yet, so it can't read the id property.

If you use the async pipe, it should wait for the data to come before displaying it.

score 8 · Answer 2 · answered Jul 11 '17 at 14:04

8

Make use of Elvis Operator instead i:e safe operator

{{results?.ip}}

answered Jul 11 '17 at 14:04

Rahul Singh

19,030
11
64
86

1

thank you but i can't do that in all my project i was wondering if im doing something out of the standards – Ayoub Idelhoussain Jul 11 '17 at 14:07

score 5 · Answer 3 · answered Dec 10 '19 at 11:35

You get this error also if you add your component to the import array instead of the declaration array.

@NgModule({
  imports: [
    ...,
    someComponent
  ],

  declarations: [...],
})
export class MainModule { }

Should be

@NgModule({
  imports: [
    ...,
  ],

  declarations: [...,someComponent],
})
export class MainModule { }

score 2 · Answer 4 · answered Jul 11 '17 at 14:04

2

put {{results}} in your html part. You'll see the value the server give you.

Maybe you should use *ngfor when you get the values and use an async pipe on it to display it correctly

answered Jul 11 '17 at 14:04

amin89

558
1
8
26

score 1 · Answer 5 · answered Jul 11 '17 at 14:03

1

Change this

import 'rxjs/add/operator/map';


this.getData().subscribe(data => {
  this.results = data;
 });
}

getData() {
     return this.http.get(this.url).map(resp => resp.json());
}

and add this in the template

*ngIf="results"

answered Jul 11 '17 at 14:03

alehn96

1,363
1
13
23

score 1 · Answer 6 · answered Jul 11 '17 at 14:08

1

import 'rxjs/add/operator/map';


this.getData().subscribe(data => {
  this.results = data;
 });
}

getData() {
     return this.http.get(this.url).map(resp => resp.json());
}

HTML part

*ngFor="let r of results | async"
 <p>{{r}}</p>

answered Jul 11 '17 at 14:08

amin89

558
1
8
26

score 1 · Answer 7 · answered Jan 24 '18 at 20:46

1

if you have more than one property you can use a class and inject them there , then it would be no problem . otherwise if you have just one single variable and u want it to be displayed pls use the safe navigation operator user?.name

answered Jan 24 '18 at 20:46

Mohamed Hmini

81
9

angular 4 cannot read property 'id' of undefined

7 Answers7