AngularJS - Print JSON with ng-repeat

Question

New to angularjs and trying to figure out how to print using ng-repeat.

My JSON feed looks like this:

[
{
    "metric": [
        {
            "event": [
                {
                    "id": 1,
                    "name": "Wedding",
                    "date": "2013-12-17",
                    "time": "2000-01-01T20:47:46Z",
                    "description": "Wedding Desc",
                    "address": "Wedding Address",
                }
            ]
        },
        {
            "meal": [
                {
                    "id": 1,
                    "name": "Chicken",
                    "description": "Chicken Yum!",
                }
            ]
        }
    ]
},
{
    "metric": [
        {
            "event": [
                {
                    "id": 2,
                    "name": "Rehersal",
                    "date": "2013-12-17",
                    "time": "2000-01-01T20:47:46Z",
                    "description": "Rehersal Desc",
                    "address": "Rehersal Address"
                }
            ]
        },
        {
            "meal": [
                {
                    "id": 2,
                    "name": "Steak",
                    "description": "9oz"
                }
            ]
        }
    ]
}
]

And for each "metric" I would like to print it out like this

Event Name:
Date:
Time:
Address:
Event Description:

Meal Name:
Meal Description:

On my template I have:

<div ng-repeat="metric in eventmetrics">
 {{ metric }}
</div>

This prints:

{"metric":[{"event":[{"id":1,"name":"Wedding","date":"2013-12-17","time":"2000-01-01T20:47:46Z","description":"Wedding Desc","address":"Wedding Address"}]},{"meal":[{"id":1,"name":"Chicken","description":"Chicken Yum!"}]}]} 

{"metric":[{"event":[{"id":2,"name":"Rehersal","date":"2013-12-17","time":"2000-01-01T20:47:46Z","description":"Rehersal Desc","address":"Rehersal Address"}]},{"meal":[{"id":2,"name":"Steak","description":"9oz"}]}]}

Which shows the right info - however I can't go metric.event.name or metric.meal.name and I get nothing printed.

I checked out my JSON with JSONLint and it seems to validate.

Any help is much appreciated.

I've posted an answer with two solutions along with plunkers. — lucuma
– lucuma, Commented Jan 8, 2014 at 22:57

lucuma · Accepted Answer · 2014-01-08 22:55:04Z

I'll provide you the two solutions. One that uses array indices and the other that uses all nested ng-repeats:

Based on your json you'll probably want to do something like this with multiple repeats:

http://plnkr.co/edit/0ocF9clnDmbGAw4kwt8T?p=preview

<div ng-repeat="item in eventmetrics">
 <div ng-repeat="metric in item.metric">
   <div ng-repeat="event in metric.event">

     Event Name: {{event.name}} <br/>
     Date: {{event.date}} <br/>
     Time: {{event.time}} <br/>
     Address {{event.address}} <br/>
     Event Description: {{event.description}} <br />

   </div>

   <div ng-repeat="meal in metric.meal">

   Meal Name: {{meal.name}} <br />
   Meal Description: {{meal.description}} <br /> 
   </div>
  </div>
</div>

which will print out the following:

Event Name: Wedding 
Date: 2013-12-17 
Time: 2000-01-01T20:47:46Z 
Address Wedding Address 
Event Description: Wedding Desc 
Meal Name: Chicken 
Meal Description: Chicken Yum! 
Event Name: Rehersal 
Date: 2013-12-17 
Time: 2000-01-01T20:47:46Z 
Address Rehersal Address 
Event Description: Rehersal Desc 
Meal Name: Steak 
Meal Description: 9oz

If you want to use the array approach which produces the same textual output (one less div though):

http://plnkr.co/edit/jUA22TJHfu0lZC1rgjNk?p=preview

<div ng-repeat="item in eventmetrics">

   <div ng-repeat="event in item.metric[0].event">

     Event Name: {{event.name}} <br/>
     Date: {{event.date}} <br/>
     Time: {{event.time}} <br/>
     Address {{event.address}} <br/>
     Event Description: {{event.description}} <br />

   </div>

   <div ng-repeat="meal in item.metric[1].meal">

   Meal Name: {{meal.name}} <br />
   Meal Description: {{meal.description}} <br /> 
   </div>
  </div>
</div>

Alborz · Accepted Answer · 2014-01-08 19:53:56Z

1

If your json "metric" is an array so you need to iterate on each "metric" too. If "metric" is not an array replace the '[' with '{' when defining it in your json.

edited Jan 8, 2014 at 19:53

answered Jan 8, 2014 at 19:25

Alborz

6,9333 gold badges26 silver badges37 bronze badges

2 Comments

OHope Over a year ago

Thanks - basically a metric has a array of event info and meal info. I went ahead and did this: <div ng-repeat="metric in eventmetrics"> <div ng-repeat="event in metric"> {{ event.name }} </div> </div> And I still don't get any data!

Snowburnt Over a year ago

@OwenHope event is also an array, you should be able to reference event[0].name

Daiwei · Accepted Answer · 2014-01-08 19:22:13Z

0

According to your JSON structure, I think you should use metric[1].meal[0].name to retrieve your name.

answered Jan 8, 2014 at 19:22

Daiwei

44.3k4 gold badges41 silver badges49 bronze badges

3 Comments

Simon Belanger Over a year ago

It should be metric[0]. Event is the first element of the metric array.

Daiwei Over a year ago

@SimonBelanger you are right, but meal is in #2 of the array.

Simon Belanger Over a year ago

Correct. I was under the impression meal was within the event array.

Snowburnt · Accepted Answer · 2014-01-08 19:29:39Z

0

your JSON is valid, but confusing. Your metrics have document arrays inside them, so unless they're always ordered the same, you're going to have to repeat through them as well.

further, your event and meals are arrays seemingly unnecessarily. I'd look into the composure of them.

you need to use HTML to format your bindings inside the repeater:

<div ng-repeat="metric in eventmetrics">
 Event Name: {{metric[0].event[0].name}} <br/>
 Date: {{metric[0].event[0].date}} <br/>
 Time: {{metric[0].event[0].time}} <br/>
 Address {{metric[0].event[0].address}} <br/>
 Event Description: {{metric[0].event[0].description}} <br />
 <br />
 Meal Name: {{metric[1].meal[0].name}} <br />
 Meal Description: {{metric[1].meal[0].description}} <br />
</div>

or you could bind it to an element using ng-model in case you want to be able to directly modify it later

name: <input ng-model="metric[0].event[0].name"></input>

answered Jan 8, 2014 at 19:29

Snowburnt

6,9558 gold badges33 silver badges44 bronze badges

3 Comments

OHope Over a year ago

Hmm I am still not getting any data printed, just the labels.

Snowburnt Over a year ago

I just edited to take into account that metric is also an array

OHope Over a year ago

Yeah, with the updated code I am still seeing no data, even though it is looping the correct amount of times.

Collectives™ on Stack Overflow

AngularJS - Print JSON with ng-repeat

4 Answers 4

Comments

2 Comments

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related