How to display a json list on angular?

Question

i'm having a problem to display a element of a JSON in the html

Here is the JSON

peopleList: [
    {
        name: 'John',
        address: 'Street A, 143',
        sons: [{
            First: "Jack",
            Second: "Jane",
            Third: "Maria"
        }]
    }]

And here is the html

<div ng-repeat="people in peopleList">
    <span class="">name: {{people.name}}</span><br>
    <span class="">sons: {{people.sons}}</span>
</div>

And this show Sons: [{"First": "Jack", "Second": "Jane", "Third": "Maria", "_id": "5604e8e474758451s6d813"}]

I have tried to use

people.sons.First

but didn't showed anything

what depends are ng-repeat="name in names" and people?. Or, does they depend? — Sherali Turdiyev
– Sherali Turdiyev, Commented Sep 25, 2015 at 7:07

Anand G · Accepted Answer · 2015-09-25 06:49:26Z

1

Your ng-repeat iteration looks kinda suspicious to me, try below

<div  ng-repeat="name in names">
   <span class="">name: {{name.name}}</span><br>
   <span class="">sons: {{name.sons.First}}</span>

 </div>

If you want to iterate Sons then it may look like below

<div  ng-repeat="name in names">
   <span class="">name: {{name.name}}</span><br>
   <span class="" ng-repeat="son in name.sons">
                 sons First: {{son.First}}
                 sons Second: {{son.Second}}                       
                 sons Third: {{son.Third}}                       
    </span>

 </div>

answered Sep 25, 2015 at 6:49

Anand G

3,2102 gold badges24 silver badges30 bronze badges

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

2 Comments

Satpal Over a year ago

I think it should be name in people

Anand G Over a year ago

Good Point! OP has not shown what scope variable he is using. I was thinking same but though just an idea of iterating object may lead him to find answer.

potatopeelings · Accepted Answer · 2015-09-25 06:51:12Z

1

What you need is

{{people.sons[0].First}}

if you need to show just the first son.

This is because your sons property is an array (which is a bit odd - it implies that you have a 2nd set of sons? :-)). The [0] selects the set and the .First selects Jack

answered Sep 25, 2015 at 6:51

potatopeelings

41.2k8 gold badges97 silver badges121 bronze badges

3 Comments

Satpal Over a year ago

I think it should be name in people

potatopeelings Over a year ago

@Satpal - thanks! I think OP seemed worried more about the sons part (the result and trials are more around that)

Nivaldo Neto Over a year ago

Thanks, it helped a lot

kavinhuh · Accepted Answer · 2015-09-25 06:49:01Z

0

use

 <span class="">name: {{name.name}}</span><br>
   <span class="">sons: {{name.sons.First}}</span>

answered Sep 25, 2015 at 6:49

kavinhuh

7391 gold badge9 silver badges30 bronze badges

1 Comment

Nivaldo Neto Over a year ago

I have tried this and didn't worked, maybe i had made some mistake on the syntax haha

Sajin M Aboobakkar · Accepted Answer · 2015-09-25 06:49:42Z

0

You are repeating over names into name, so if you have a json array in names and if you want to render,according to your example please use name.name name.sons in the html inside ng-repeat

answered Sep 25, 2015 at 6:49

Sajin M Aboobakkar

4,2394 gold badges34 silver badges40 bronze badges

1 Comment

Nivaldo Neto Over a year ago

Hmmm, Okay, i will try, Thanks!

Collectives™ on Stack Overflow

How to display a json list on angular?

4 Answers 4

2 Comments

3 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

3 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related