CODEWITHSUNDEEP
javascriptjsonangularjs
Nivaldo Neto
Nivaldo Neto

Reputation: 123

How to display a json list on angular?

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

Upvotes: 3

Views: 158

Answers (4)

potatopeelings
potatopeelings

Reputation: 41075

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

Upvotes: 1

Sajin M Aboobakkar
Sajin M Aboobakkar

Reputation: 4229

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

Upvotes: 0

Anand G
Anand G

Reputation: 3200

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>

Upvotes: 1

kavinhuh
kavinhuh

Reputation: 739

use 

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

Upvotes: 0

Related Questions