How to display this JSON format using AngularJS

Question

I have two JSON formats,

JSON -

[
    { 
        "name":"Alex", 
        "country":"United States"
    }, 
    { 
        "name":"Jaswanth", 
        "country":"India"
    }
]

AngularJS Code -

I was able to display the output

<div ng-repeat="result in results">             
    {{result.name}} - {{result.country}}
</div>

But if I change my JSON, I am not able to see the output..

[
    {
        "info": [
            "one",
            "two",
            {
                "id": 944589,
                "contractYear": 2014
            }
        ],
        "country": "India",
        "name": "jaswanth"
    },
    {
        "info": [
            "three",
            "four",
            {
                "id": 944589,
                "contractYear": 2014
            }
        ],
        "country": "US",
        "name": "jass"
    }
]

How to I change my AngularJS code ?

JSON returned was originally an array, but now it's an object. Why did that change? — Explosion Pills
– Explosion Pills, Commented Nov 10, 2014 at 0:19
If you do ng-repeat on the object it will iterate over each property instead so result.name would not exist, result itself would be the name. — Explosion Pills
– Explosion Pills, Commented Nov 10, 2014 at 0:22
The same AngularJS template code should work fine on both structures (your very first, and your edited second). As such if this is not working then you have something else wrong somewhere which we cannot see (code, data format, an error, something...) — JAAulde
– JAAulde, Commented Nov 10, 2014 at 1:13

Coldstar · Accepted Answer · 2014-11-10 07:25:30Z

1

<div ng-init="init();">
    <div ng-repeat="result in data">             
        {{result.name}} - {{result.country}}
        <br/>
        <div ng-repeat="(k,v) in result.info">
            <span ng-if="v.id">The id is: {{v.id}}</span>
            <span ng-if="(!v.id)">{{v}}</span>
        </div>
        <hr/>
    </div>
</div>

edited Nov 10, 2014 at 7:25

answered Nov 10, 2014 at 1:29

Coldstar

1,3511 gold badge12 silver badges33 bronze badges

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

3 Comments

Coldstar Over a year ago

info is essentially an array of objects, so treat it as an iterable

Siva Over a year ago

Thank you so much Coldstar, 90% completed. I am getting the output as.. jaswanth - india 0: one 1: two 2: {"id":944589,"contractYear":2014} jass - US 0: three 1: four 2: {"id":944589,"contractYear":2014} I want to print {"id":944589,"contractYear":2014} as normal values not json, can you help me to fix that.

Siva Over a year ago

I mean in the second index of 'info' array, we have to print for {{id}} - {{contractYear}}, i have tried to use ng-if but no luck.

Collectives™ on Stack Overflow

How to display this JSON format using AngularJS

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