Javascript AngularJS-使用ng repeat打印JSON

angularjs新手，正在尝试找出如何使用ng repeat打印

我的JSON提要如下所示：

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

对于每个“指标”，我想像这样打印出来

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

Meal Name:
Meal Description:

在我的模板上，我有：

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

这显示了正确的信息-但是我不能去metric.event.name或metric.mean.name，我没有得到任何打印

我用JSONLint签出了我的JSON，它似乎可以验证

---

非常感谢您的帮助。

根据您的JSON结构，我认为您应该使用

度量[1]。膳食[0]。姓名
来检索您的姓名。
根据您的JSON结构，我认为您应该使用
度量[1]。膳食[0]。姓名
来检索您的姓名。
如果您的JSON“度量”是一个数组，那么您需要对每个度量进行迭代“metric”也是。如果“metric”不是数组，则在json中定义它时，将“[”替换为“{”。
如果json“metric”是数组，则也需要迭代每个“metric”。如果“metric”不是数组，则将“[”替换为{'在json中定义时。
您的json是有效的，但容易混淆。您的指标中包含文档数组，因此除非它们总是按相同顺序排列，否则您也必须重复它们

此外，你的活动和用餐似乎是不必要的。我会调查一下它们的沉着

您需要使用HTML在中继器内格式化绑定：

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

你的JSON是有效的，但令人困惑。你的指标中有文档数组，所以除非它们总是按相同的顺序排列，否则你也必须重复它们

此外，你的活动和用餐似乎是不必要的。我会调查一下它们的沉着

您需要使用HTML在中继器内格式化绑定：

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

我将为您提供两种解决方案。一种使用数组索引，另一种使用所有嵌套ng重复：

基于您的json，您可能希望通过多次重复执行类似操作：


如果您想使用数组方法来生成相同的文本输出（不过少了一个div）：



事件名称：{{Event.Name}}

日期：{event.Date}}

时间：{{event.Time}}

地址{{event.Address}}

事件描述：{{Event.Description}}

餐名：{{meat.Name}}

膳食描述：{{mean.Description}}

我将为您提供两种解决方案。一种使用数组索引，另一种使用所有嵌套ng重复：

基于您的json，您可能希望通过多次重复执行类似操作：


如果您想使用数组方法来生成相同的文本输出（不过少了一个div）：



事件名称：{{Event.Name}}

日期：{event.Date}}

时间：{{event.Time}}

地址{{event.Address}}

事件描述：{{Event.Description}}

餐名：{{meat.Name}}

膳食描述：{{mean.Description}}

它应该是公制[0]。事件是
公制数组的第一个元素。@SimonBelanger你是对的，但是
膳食
在数组的第二个元素中。正确。我当时的印象是
膳食
在
事件
数组中。它应该是公制[0].Event是
metric
数组的第一个元素。@SimonBelanger你是对的，但是
deal
在数组的#2中。正确。我当时的印象是
deal
在
Event
数组中。嗯，我仍然没有打印任何数据，只有标签。我只是编辑以考虑到该度量也是一个数组arrayYeah，更新代码后，我仍然看不到数据，即使它循环了正确的次数。嗯，我仍然没有打印任何数据，只有标签。我只是编辑，以考虑到该度量也是一个arrayYeah，更新代码后，我仍然看不到数据，即使它循环了正确的次数。Thanks-基本上一个度量值有一个事件信息和膳食信息数组。我继续这样做：{event.name}，但我仍然没有得到任何数据！@OwenHope event也是一个数组，您应该能够引用事件[0]。name谢谢-基本上一个度量值有一个事件信息和膳食信息数组。我继续这样做：{{event.name}我仍然没有得到任何数据！@OwenHope event也是一个数组，你应该能够引用事件[0]。name你能为这个放一个plunkr吗？我已经发布了一个包含两个解决方案和plunkers的答案。你能为这个放一个plunkr吗？我已经发布了一个包含两个解决方案和plunkers的答案。
name: <input ng-model="metric[0].event[0].name"></input>

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

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 

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