Angular2映射並使用typescript迭代JSON對象

Question

在我的應用程序中，我發出一個返回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 ，以僅獲取當前ID為“6288ba45-3b41-4862-9fed-7271245b9c29”。 它不起作用，什么都不返回。

無法遍歷JSON對象

由於我無法過濾，我暫時刪除過濾器行並嘗試迭代此JSON以獲取數據和樣式 。 要訪問它，例如，使用this.Data.possibilities.data （我不知道如何檢索可能性ID來執行this.Data.possibilities.[UUID].data或this.data.possibilities[0].data ）。

我在代碼中努力做到這一點。 控制台返回一個Object格式的JSON，我真的不知道如何迭代它。 我試圖使用this.Data.forEach()但它返回一個錯誤，因為forEach在this.Data元素上不存在。

我在Angular2上看到的每個解決方案都在ngFor中，但我需要在組件類中直接執行此操作。

謝謝你的幫助。

Answer 1

過濾器適用於Array。 您的數據（對象文字）不是數組。
您可以使用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);
      });