Angular 2 json pipe shows content but not actual data

Question

<ul class="list-group">
  <li class="list-group-item" *ngFor="#event of events">{{event | json}}</li>
</ul>

This works and shows all the correct data!

<ul class="list-group">
  <li class="list-group-item" *ngFor="#event of events">{{event.name}}</li>
</ul>

But this does not :/

I'm using Parse to fetch data and yes, there's a key with name, name.

export class EventsComponent {
  events: any[];

  ngOnInit() {
    this.fetchEvents();
  }

  fetchEvents() {
    let events = Parse.Object.extend('Event');
    let query = new Parse.Query(events);
    query.find({
      success: (results) => {
        this.events = results;
      },
      error: (error) => {
         console.log(error);
      }
   });
  }
}

could you add sample response in question? seems like there is something wrong with response see [this plunkr](http://plnkr.co/edit/kqtdqfcZfs3qn4QBz0oA?p=preview) — Pankaj Parkar, Apr 16 '16 at 03:01
@PankajParkar Yes, the response I received wasn't in the right format! Thanks — aayushkapoor206, Apr 17 '16 at 05:12

score 0 · Answer 1 · answered Apr 16 '16 at 10:40

Use the ?. safe-navigation (or Elvis) operator

<li class="list-group-item" *ngFor="#event of events">{{event?.name}}</li>

event.name breaks when Angular tries to resolve the binding and event is still null because you fetch in only in ngOnInit() which is quite a bit after Angulars first attempt to bind values.

Angular 2 json pipe shows content but not actual data

1 Answers1