如何使用 Angular JS 访问 JSON 中的嵌套对象答案

【问题标题】：How to access nested objects in JSON using angular JS如何使用 Angular JS 访问 JSON 中的嵌套对象
【发布时间】：2015-09-28 16:02:20
【问题描述】：

这是我的 JSON 数据的格式：

[

 {

 "Department_id": "34",

 "Names": [

     "Jack Jones",

     "Matt Jones",

     "Lynn Lewis"

  ],

  "Employee-num": 3,

  "Salary-info": {

      "Jack Jones": 1000,

      "Matt Jones": 2920,

      "Lynn Lewis": 1500

    },

 },

]

您如何获得“工资信息”？并显示如下：

Jack Jones: 1000

Matt Jones: 2920

Lynn Lewis: 1500

在翡翠上，我尝试使用

p(ng-repeat='details in info.salary-info') {{ details }}

但它不起作用，它只在屏幕上显示一个“0”。

info.Department_id 用于显示部门 id 为 34。

问题解决了。

什么都不显示的问题是因为对象名称上存在连字符。

您需要使用'[“带有连字符的对象名称”]'来访问此类对象，

喜欢：{{ info["salary-info"] }}

而不是 {{ info.salary-info }}。

希望它能帮助遇到同样问题的人。

【问题讨论】：

我猜你可以为此简化 api 输出 ...people:[{name:'Jack',salary:100]}。数组可以排序，但对象不能。如果可以避免，通常最好不要在属性名称中使用特殊字符

标签： javascript json angularjs pug

【解决方案1】：

您可以像这样从对象中获取键和值：

<span ng-repeat="(name, salary) in info['Salary-info']">{{name}} : {{salary}}</span>

https://docs.angularjs.org/api/ng/directive/ngRepeat#iterating-over-object-properties

【讨论】：

{{name}} : {{salary}}

【解决方案2】：

问题是Salary-info 中的连字符。有关演示，请参阅此plunker。

index.html

<!-- Jack Jones: 1000 Matt Jones: 2920 Lynn Lewis: 1500 -->
<p ng-repeat="name in details.Names">
  {{name}}: {{details['Salary-info'][name]}}
</p> <!-- works -->

or

<p ng-repeat="(name, salary) in details['Salary-info']">
  {{name}}: {{salary}}
</p> <!-- works-->

or

<p ng-repeat="(name, salary) in details2.SalaryInfo">
  {{name}}: {{salary}}
</p> <!-- works -->

一切正常，但是

<p ng-repeat="(name, salary) in details.Salary-info">
  {{name}}: {{salary}}
</p> <!-- fails!-->

失败。

数据

app.js

app.controller('MainCtrl', function($scope) {
  $scope.details =
      ...
        "Salary-info": {"Jack Jones": 1000, "Matt Jones": 2920, "Lynn Lewis": 1500},
      ...

  $scope.details2 =
      ...
      "SalaryInfo": {"Jack Jones": 1000, "Matt Jones": 2920, "Lynn Lewis": 1500},
      ...

【讨论】：

【解决方案3】：

对象的ngRepeat 语法是(k, v) in obj - 所以你可以这样做：

p(ng-repeat='(name, salary) in info.salary-info') {{ name }} : {{salary}}

【讨论】：

此语法适用于“姓名”，因为它是一个数组，但我尝试将它用于薪水信息。它不工作。
@Brother_MW -- 以上是对象语法 - 它不适用于数组。
不确定是否会使用点符号在属性名称中评估-，并且数据具有上限 S ...info['Salary-info'] 可能会更好