Angular2 使用打字稿映射和迭代 JSON 对象答案

【问题标题】：Angular2 map and iterate JSON object with typescriptAngular2 使用打字稿映射和迭代 JSON 对象
【发布时间】：2017-05-12 01:37:24
【问题描述】：

在我的应用程序中，我发出一个返回 JSON 的 http 请求。

这里是 JSON 的结构：https://demo6902979.mockable.io/data

{
  "6288ba45-3b41-4862-9fed-7271245b9c29": {
    "id": "6288ba45-3b41-4862-9fed-7271245b9c29",
    "name": "name1",
    "possibilities": {
      "a48382bf-dde6-479d-8456-beee63f592be": {
      "id": "a48382bf-dde6-479d-8456-beee63f592be",
      "data": "anydata1",
      "style": null
      },
      "d62fb2d2-58a6-458c-9e7f-78774af4d9fe": {
      "id": "d62fb2d2-58a6-458c-9e7f-78774af4d9fe",
      "data": "anydata2",
      "style": null
      }
    }
  },
  "860aefe6-ff70-436b-8d2b-554251e8fb59": {
    "id": "860aefe6-ff70-436b-8d2b-554251e8fb59",
    "name": "name2",
    "possibilities": {
      "e30ef32b-20c2-4ddc-8d5f-e5f1fc35a6b7": {
      "id": "e30ef32b-20c2-4ddc-8d5f-e5f1fc35a6b7",
      "data": "anydata3",
      "style": null
      },
      "49e8b455-848c-4cb2-bb84-5b7b3bc5fc4a": {
      "id": "49e8b455-848c-4cb2-bb84-5b7b3bc5fc4a",
      "data": "anydata4",
      "style": null
      }
    }
  }
}

这是我的代码：

return this.http.get(`https://demo6902979.mockable.io/data`)
    .map((res: Response) => res.json())
    .filter((choices) => choices.id === "6288ba45-3b41-4862-9fed-7271245b9c29")
    .subscribe(
      data => {
        this.Data = data;
        console.log('Data:', data);
      },
      error => {
         console.log('Get data failed Error:', error);
      }
    );

无法正确过滤

例如，我正在尝试在此 JSON 上创建 filter 以仅获取“6288ba45-3b41-4862-9fed-7271245b9c29”的当前 ID。它不起作用，什么也不返回。

无法遍历 JSON 对象

由于无法过滤，我暂时删除过滤器行并尝试遍历此 JSON 以获取数据和样式。例如，要访问它，使用this.Data.possibilities.data（我不知道如何检索可能性ID 来执行this.Data.possibilities.[UUID].data 或this.data.possibilities[0].data）。

我正在努力在我的代码中做到这一点。控制台返回一个对象格式的 JSON，我真的不知道如何遍历它。我尝试使用this.Data.forEach()，但它返回错误，因为 this.Data 元素上不存在 forEach。

我在 Angular2 上看到的所有解决方案都在 ngFor 中，但我需要直接在组件类中执行此操作。

感谢您的帮助。

【问题讨论】：

标签： json angular typescript

【解决方案1】：

过滤器适用于数组。您的数据（对象文字）不是数组。
您可以使用 Object.keys 映射对象的属性，然后将它们映射到实际值。

var data = ...

Object.keys(a)
      .map(key => data[key]})
      .filter(choices => choices.id === "6288ba45-3b41-4862-9fed-7271245b9c29")
      .subscribe(data => {
          this.Data = data;
          console.log('Data:', data);
      },
      error => {
         console.log('Get data failed Error:', error);
      });

【讨论】：