对象数组的 Angular JSON 过滤器答案

【问题标题】：Angular JSON Filter for Array of Objects对象数组的 Angular JSON 过滤器
【发布时间】：2013-10-07 15:26:44
【问题描述】：

我正在使用 $http 来获取用户集合。来自服务器的原始响应是这样的......

[{"id":2,"name":"John Doe","email":"johndoe@infosnap.com"}]

在成功回调中记录 data 参数显示了这个...

[Object, each: function, eachSlice: function, all: function, any: function, collect: function…]
  0: Object
    $$hashKey: "004"
    email: "johndoe@infosnap.com"
    id: 2
    name: "John Doe"
    __proto__: Object
  length: 1
__proto__: Array[0]

足够好。看起来 $http 已经将原始 JSON 反序列化为 JavaScript 对象。

接下来，我将数据分配给 $scope 变量，在成功回调中，以便在浏览器中执行一些调试...

$scope.debug = data;

现在，在我看来，我想将其显示为漂亮的 JSON 以便调试。

<pre>{{debug | json}}</pre>

我明白了……

"[{\"id\": 2, \"name\": \"John Doe\", \"email\": \"johndoe@infosnap.com\", \"$$hashKey\": \"004\"}]"

我正在尝试得到这样的东西......

[
  {
    "id": 2,
    "name": "John Doe",
    "email": "johndoe@infosnap.com",
    "$$hashKey": "004"
  }
]

我还尝试在控制器中对 javascript 数组进行字符串化...

$scope.debug = JSON.stringify(data, true);

不要使用过滤器...

<pre>{{debug}}</pre>

但我得到相同的结果，除了 $$hashKey 已被删除...

"[{\"id\": 2, \"name\": \"John Doe\", \"email\": \"johndoe@infosnap.com\"}]"

如果我只是将数组中的第一项分配给 $scope，并使用 json 过滤器，它就可以正常工作...

$scope.debug = data[0];

在我看来……

<pre>{{debug | json}}</pre>

结果...

{
  "id": 2,
  "name": "John Doe",
  "email": "johndoe@infosnap.com"
}

我知道还有其他方法可以得到我想要的。我只是想了解发生了什么。

谢谢！

【问题讨论】：

你为什么不直接使用控制台呢？ O.o
谢谢。我正在使用控制台，效果很好。但是，我想深入了解问题，而不仅仅是解决它。我想了解为什么它不像我预期的那样工作。要么它工作正常，但我误解了它应该如何工作，要么我正确理解它应该如何工作，但我做的有点不对，或者我理解它应该如何工作，并且做得正确，但过滤器代码中存在一些错误。只是想学习。

标签： javascript json angularjs

【解决方案1】：

你应该解析 json 而不是 stringify。

试试这个：

$scope.debug = JSON.parse(data)

Working Fiddle

【讨论】：

谢谢 Beteraraba，我试过了，但问题是在 $http get 调用的成功回调中，json 已经被解析为 JavaScript 数组对象。