angularJS - 遍历 JSON 对象答案

【问题标题】：angularJS - iterating through JSON objectangularJS - 遍历 JSON 对象
【发布时间】：2015-12-29 13:51:14
【问题描述】：

我想在我的网页上显示一个名为 znanja 的嵌套 JSON“对象”。它将包含一些我想放入列表的值。基本上我正在建立一个投资组合并想列出我的技能。到目前为止，我已经设法显示标题和整个对象，或者通过调用特定对象（例如{{ znanje.ena }}），但我不知道如何在没有属性名称的情况下显示它们。如果我只打电话给{{ znanje }}，我会像在 JSON 中一样列出它们。有没有我可以使用的 angularJS 指令？我是 Angular 新手，因此感谢您提供任何帮助。

我的看法：

<div ng-repeat="skill in skills">
    <h1>{{ skill.title }}</h1>
    <p ng-repeat="znanje in skill.znanja">{{ znanje }}</p>
</div>

我的数据：

  $scope.skills = [
  {
      title: "Code Knowledge",
      znanja : [{
        ena : "Javascript",
        dva : "HTML",
        tri : "CSS",
        stiri : "SASS"
      }]
  },
  {
      title: "Base Code Knowledge",
      znanja : [{
        ena : "Java",
        dva : "PhP"
      }]
  },
  {
      title: "Data",
      znanja : [{
        ena : "MongoDB",
        dva : "MySQL"
      }]
  }
  ];

PS：我已将 znanja 属性命名为 ena、dva、tri、stiri 而不是 1、2、3、4，以便能够在 html 中调用它们。

【问题讨论】：

要注意是javascript对象，不是json对象。

标签： javascript angularjs json angularjs-ng-repeat

【解决方案1】：

您要应用循环的对象只不过是znanja 数组中的第一个元素，因此您应该指定skill.znanja[0] 而不是skill.znanja。

通过这样做，ng-repeat 将遍历对象的每个属性，{{znanje}} 将打印znanja[0] 的每个属性的值

标记

<div ng-repeat="skill in skills">
    <h1>{{ skill.title }}</h1>
    <p ng-repeat="znanje in skill.znanja[0]">{{ znanje }}</p>
</div>

【讨论】：

【解决方案2】：

可以让 ngRepeat 迭代一个使用以下语法的对象：

<div ng-repeat="(key, value) in skill.znanja"> ... </div>

https://docs.angularjs.org/api/ng/directive/ngRepeat

【讨论】：

【解决方案3】：

为了显示属性，您需要一个 DOM 元素，而一个 DOM 元素需要一个特定的值来呈现，因此您必须至少手动进行一次迭代，专门调用属性。但是，如果您有任何重复，您可以像以前一样使用 ng-repeat 将其包含在内。

也就是说，如果您想在 html 页面上单独显示每个属性，然后想访问它，但如果您只想显示为 json 对象，这将像传递 一样简单>json

【讨论】：

【解决方案4】：

<div ng-repeat="skill in skills">
    <h1>{{ skill.title }}</h1>
    <p ng-repeat="(key,value) in skill.znanja[0]">{{key}} <b>:</b> {{value}}</p>
</div>

【讨论】：

【解决方案5】：

（已测试）结合了 znanja-object 0 和值：

    <div ng-repeat="skill in skills">
    <h1>{{ skill.title }}</h1>

    <p ng-repeat="(key, value) in skill.znanja[0] ">{{ value }}</p>
    </div>

【讨论】：

【解决方案6】：

解决此问题的最简单、最好的方法是更改数据结构。只需删除您迭代的列表周围的包装数组，将它们变成对象映射：

$scope.skills = [
{
  title: "Code Knowledge",
  znanja : {
    ena : "Javascript",
    dva : "HTML",
    tri : "CSS",
    stiri : "SASS"
  }
},
{
  title: "Base Code Knowledge",
  znanja : {
    ena : "Java",
    dva : "PhP"
  }
},
{
  title: "Data",
  znanja : {
    ena : "MongoDB",
    dva : "MySQL"
  }
}
];

如果您不打算以任何方式使用该数组（所有示例仅包含一个元素），那么没有理由将它放在那里。

无需以这种方式更改原始 ng-repeat 中的任何内容。

【讨论】：