AngularJS - Stampa JSON con NG-REPEAT

Question

Nuovo a AngularJS e cercando di capire come stampare usando NG-Ripeti.

Il mio feed JSON è simile a questo:

[
{
    "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"
                }
            ]
        }
    ]
}
]

.

E per ogni "metrica" vorrei stamparlo come questo

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

Meal Name:
Meal Description:

.

sul mio modello ho:

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

.

Queste stampe:

{"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"}]}]}

.

che mostra le informazioni giuste - tuttavia non posso andare metrico.event.name o metrica.meal.name e non ottengo nulla stampato.

Ho controllato il mio JSON con JSONLINT e sembra convalidare.

Qualsiasi aiuto è molto apprezzato.

Answer 1

Ti fornirò le due soluzioni.Uno che utilizza gli indici di array e l'altro che utilizza tutte le ripetizioni NG nidificate:

Basato sul tuo JSON probabilmente vorrete fare qualcosa di simile con più ripetizioni:

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>

.

che stamperà il seguente:

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 

.

Se si desidera utilizzare l'approccio dell'array che produce la stessa uscita testuale (una meno div però):

http://plnkr.co/edit/jua22tjhfu0lzc1rgjhfu0lzc1rgjnk?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

Se la tua "metrica" JSON è un array, quindi è necessario iterare su ogni "metrica".Se "metrica" non è un array sostituire il '[' con '{' quando lo si definisce nel tuo JSON.

Answer 3

Secondo la tua struttura JSON, penso che dovresti usare metric[1].meal[0].name per recuperare il tuo nome.

Answer 4

Il tuo JSON è valido, ma confuso.Le tue metriche hanno gli array di documenti dentro di loro, quindi a meno che non vengano sempre ordinati lo stesso, dovrai ripeterlo anche attraverso di loro.

Inoltre, il tuo evento e i pasti sono gli array apparentemente inutilmente.Vederei la compostezza di loro.

È necessario utilizzare HTML per formattare i Bindings all'interno del ripetitore:

<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>

.

O puoi legarlo a un elemento usando ng-model nel caso in cui si desideri modificarlo direttamente in seguito

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

.