对象数组的角度 JSON 过滤器

Angular JSON Filter for Array of Objects

本文关键字：JSON 过滤器 数组 对象      更新时间：2023-09-26

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

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

在成功回调中记录数据参数会显示这一点...

[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"
}

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

谢谢！

你应该解析 json 而不是字符串化。

试试这个：

$scope.debug = JSON.parse(data)

工作小提琴

相关文章：