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.

Answer 1

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>

Answer 2

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.

Answer 3

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

Answer 4

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>