Javascript 如何在ng repeat中正确显示此json文件？

我正在尝试为我的网站创建一个商店页面。我想在ng repeat中显示以下json文件：

{
“纸杯蛋糕”：{
“香草”：[
{“价格”：“9.99”，“股票”：“20”，“金额”：“8”，
“配料”：“面粉、糖、香草精”，
“流行”：真的}
],
“枫树”：[
{“价格”：“9.99”，“股票”：“15”，“金额”：“8”，
“配料”：“面粉、糖、枫糖浆”，
“流行”：真的}
]
},
“饼干”：{
“香草”：[
{“价格”：“7.99”，“库存”：“50”，“数量”：“12”，“配料”：“面粉、糖、香草精”}
],
“枫树”：[
{“价格”：“7.99”，“库存”：“50”，“数量”：“12”，“配料”：“面粉、糖、枫糖浆”}
]
}
}

以下是一种使用

ng repeat

显示数据的方法：

 <div ng-repeat="(foodKey, foodVal) in foods">
     <b>{{foodKey}}</b>
      <div ng-repeat="(typesKey, typesVal) in foodVal">
          <span>{{typesKey}}</span>
          <ul ng-repeat="types in typesVal">
              <li ng-repeat="(key, val) in types">
                  {{key}} : {{val}}
              </li>
         </ul>
    </div>
</div>

{{foodKey}}
{{typesKey}}


{{key}}:{{val}

当然，只有当

foods

是您在答案中发布的json时，它才会起作用

这是一张工作票

---

有关

ng repeat

的更多信息，请参阅。

您可以使用javascript中JSON的键，通过将JSON转换为对象来执行任何操作

JSON.parse(json); 

稍后，您可以访问任何键，该键将是循环或排序的对象/哈希映射

因此，在您的例子中，您的API结果可以像

var resultData = JSON.parse(result.data); 

稍后，您可以在视图中重复以下操作

[{id: 'foo'}, {id: 'bar'}] | orderBy:'id' 

---

在Javascript中，几乎所有内容都是一个数组。可以迭代对象数组，也可以在对象中迭代其属性

下面的脚本应该可以完成这项工作

<div ng-repeat="(itemLabel, itemValue)in items">
     {{itemLabel}}
     <div ng-repeat="(flavorLabel, flavorValue)in itemValue">
         {{flavorLabel}}
         <div ng-repeat="object in flavorValue">
             <div ng-repeat="property in object">
                 {{property}}
             </div>
         </div>
     </div>
</div>

{{itemLabel}}
{{flavorLabel}
{{property}}

---

您需要多个

ng中继器

希望这是您的要求

只需查看JSON即可

<div ng-repeat="(key, value) in inventory">{{key}}
<ul>
  <li ng-repeat="(material_key, material_value) in value">{{material_key}}
    <ul>
      <li ng-repeat="(options_key, options_value) in material_value[0]">{{options_key}} - {{options_value}}</li>
    </ul>
  </li>
</ul>
<br>

{{key}

{{material键}

{{options\u key}}-{{options\u value}

---

看看这个。我希望这能解决你的问题

仔细想想，如果我想向json文件添加更多数据，这是行不通的。我认为这与ng repeat标签有关。有什么建议吗？没关系，我通过删除第四个“禁止重复”来解决问题。