如何访问嵌套的 json 属性答案

【问题标题】：How to access nested json property如何访问嵌套的 json 属性
【发布时间】：2019-12-13 12:05:50
【问题描述】：

我从 Angular 服务收到此响应：

response.data
events: Array(1)
0:
ingestionTime: 1560362454013
message: "{"server":"xxx.xxx","errorName":"HelloWorldError","error":"hello error"}"
timestamp: 1560362450917

我将此回复保存为：

$scope.accounts = response.data;

在 html 中打印时，屏幕上不显示任何内容：

<tr ng-repeat="event in accounts.events track by $index">
        <td>{{event.message[1].errorName}}</td>
    </tr>

当我像这样打印时

{{event.message}} //it displays whole json string

但我需要访问消息属性的 json 属性，例如：

{{event.message.errorName}} //this is not priinting anything
{{event.message[1].errorName}} //this is not priinting anything

任何人都可以给我一些建议，我是 angularJS 的新手 :(?

【问题讨论】：

标签： javascript angularjs angularjs-service angularjs-components

【解决方案1】：

如果每条消息都是 JSON 字符串，则可以解析为 JavaScript 对象：

$scope.accounts = response.data;
$scope.accounts.events.forEach( _ => _.messageObj = JSON.parse(_.message));

然后显示：

<tr ng-repeat="event in accounts.events">
    <td>{{event.messageObj.errorName}}</td>
</tr>

【讨论】：

【解决方案2】：

在上面的响应中，event.message 是一个字符串，它不是一个 JSON 对象。所以，你无法解析它。

使用

将字符串转换为 JSON 对象

var obj = JSON.parse(string);

【讨论】：

【解决方案3】：

消息属性是字符串化的。必须对其进行解析才能访问其中的各种属性。

你可以这样做：

for(var i=0; i < $scope.accounts.events.length; i++){
   $scope.accounts.events[i].message = JSON.parse($scope.accounts.events[i].message);
}

而在 HTML 中的使用方式如下。您不需要使用消息 (event.message[1].errorName) 放置索引。这是错误的。您可以将属性或索引放置在该属性所在的位置。否则它会给你不确定的。我的建议不是使用属性的索引，而是使用 event.message.errorName 之类的属性 .. 因为它更具可读性。下面的例子：

<tr ng-repeat="event in accounts.events track by $index">
    <td>{{ event.message.errorName }}</td>
</tr>

【讨论】：