How to display object properties within an object in Angular2

Question

I have an object called USAFacts with properties such as StateName and objects such as State-Bird with properties about the state bird.

In JSON a record of USAFacts would look like this:

{"StateName": PA, "State-Bird": [ { "Name": Ruffed grouse, "YearDesignated": 1931, "ScientificName": "Bonasa umbellus"}]}

I can acesss the StateName property in Angular2 using

{{ USAFacts?.StateName }}

How can I access the name of the state bird? I've tried to do it like this:

{{USAFacts?.State-Bird.Name }}

but am getting an error in chrome saying cannot read property of undefined 'Name'

driconmax · Accepted Answer · 2017-02-24 14:23:42Z

1

Don't use special characters in a property name.

In your JSON replace State-Bird with StateBird

And to access the Name property you need to first access the array StateBird.

{{USAFacts?.StateBird[0].Name}}

But, if you want to use special characters, you can use bracket notation to access that property without changing it's name

{{USAFacts?["State-Bird"][0].Name}}

answered Feb 24, 2017 at 14:23

driconmax

9421 gold badge19 silver badges32 bronze badges

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

Comments

anshuVersatile · Accepted Answer · 2017-02-24 14:20:06Z

0

{{USAFacts?.State-Bird[0].Name }}

That is array of object/s

answered Feb 24, 2017 at 14:20

anshuVersatile

2,0761 gold badge11 silver badges18 bronze badges