Access nested JSON values in AngularJS 2 in template

Question

I am new to angular 2. How do I get nested data from JSON into my Template?

Here's my JSON:

[
    {
        "eId" : "1",
        "name":"Jimi Hendrix", 
        "designation":"UI Developer", 
        "profileImage":"../defaultDP.jpeg", 
        "skills":"HTML, CSS, JS, jQuery, AngularJS, XML", 
        "graph" : {
            "keys" : ["HTML, JS, jQuery, AngularJS"],
            "values" : ["8, 5, 8, 6"]
        }
    }

]

And in my template when I am trying to access name, eId I can access easily. e.g,

{{JSONDummyData.eId}} {{JSONDummyData.name}}

but when I am trying to get Nested values, e.g,

{{JSONDummyData.graph.values}}

I am not able to access this. thanks in advance!

Maximilian Riegler · Accepted Answer · 2016-09-29 16:02:24Z

1

Since keys and values are arrays, you have to specify which element you want to display exactly like so for instance:

{{ JSONDummyData.graph.values[0] }}

working Plunker for example usage

edited Sep 29, 2016 at 16:02

answered Sep 29, 2016 at 15:11

Maximilian Riegler

23.6k4 gold badges65 silver badges73 bronze badges

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

3 Comments

Maximilian Riegler Over a year ago

Then your object does not have the structure you posted.

Chaitanya Chauhan Over a year ago

Its the same one. :)

Maximilian Riegler Over a year ago

Check out this plunker: plnkr.co/edit/tDVABR4N4ZjUPpQlLD5K?p=preview

Collectives™ on Stack Overflow

Access nested JSON values in AngularJS 2 in template

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related