Cannot read property 'name' of null Angular2 JSON

Question

I got this code in AppComponent:

getPlanetsToView(page){
  let pageToView = page*10 + 10;

  for(var i=0; i<pageToView; i++){
  this.planetsToView.push(this.planets.planets[i]);
  }

}

ngOnInit() {
   this.http.get('app/planets.json').subscribe(res => {
    this.planets = res.json();
    console.log(this.planets);
    this.getPlanetsToView(0);
  });

And I have this in template:

{{planetsToView[0].name | json}}

I have got problem: Photo

When I tried with {{planetsToView[0] | json }} it works but contain another properties also.

Riscie · Accepted Answer · 2016-11-28 19:16:52Z

3

Could be this problem:

At the time your component is initialized your JSON is not yet loaded into this.planets because the http.get call is asynchronous. Can you try this in your template: (Note the ? which is added)

{{planetsToView[0]?.name | json}}

The ? is called elivs operator and is used to safe guard against undefined references in view templates. Read more here:

edited Nov 28, 2016 at 19:16

answered Nov 28, 2016 at 17:27

Riscie

4,9291 gold badge29 silver badges33 bronze badges

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

2 Comments

R.Boguslawski Over a year ago

When I did it I got error: main.browser.ts:10 Error: Template parse errors:(…)

R.Boguslawski Over a year ago

I don't know where was error but when I copied it, start work. Thank you!

Collectives™ on Stack Overflow

Cannot read property 'name' of null Angular2 JSON

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related