Displaying Objects in HTML using Angular2

Question

In my component i am getting the json in the variable name peopleDetails

Sample JSON:

{
   name:'xxxx',
   age:123,
   details:{
      qualification:'abc',
      yearofPassing:1111
   }
}

I tried to display it in my html like this

<div>{{peopleDetails.name | async}}

But i cant able to get the property of the json

It is printing the whole json when i tried like this.

<div>{{peopleDetails.name | async | json}}

But i want to access all the properties of the Json.

It's not valid JSON, it should be { name:'xxxx', age:123, details:{ qualification:'abc', yearofPassing:1111 } } — rjdkolb
– rjdkolb, Commented Mar 1, 2017 at 6:13

balajivaishnav · Accepted Answer · 2017-03-01 06:14:33Z

3

Hard to tell from your question what the problem is. A guess:

<div>{{(peopleDetails | async)?.name}} </div>

balajivaishnav

2,8935 gold badges25 silver badges39 bronze badges

answered Mar 1, 2017 at 6:08

661k235 gold badges2.1k silver badges1.6k bronze badges

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

2 Comments

Can you explain me why we are accessing with question mark

To prevent an error when (peopleDetails | async) returns null, because null doesn't have a name property angular.io/docs/ts/latest/guide/…