如何觀察具有不同屬性名稱的地圖嵌套json對象-Angular

Question

我有一個嵌套對象的json結果。 我需要將它們強制轉換為具有與json結果不同的屬性名稱的自定義對象（原始ng樹表json）。

JSON消息：

{
      brinname: "Aamir",
      aantalPersonen: "122",
      signalenVestiging: [
        {
          vestiging: "Ranchi",
          aantalPersonen: "102",
          signalenCode: [
            {
            signaalCode: "4",
            aantalPersonen: "15"
           },
          {
            signaalCode: "5",
            aantalPersonen: "15"
          } ]
        }, {
          vestiging: "Bangalore",
          aantalPersonen: "82",
          signalenCode: [
            {
              signaalCode: "6",
              aantalPersonen: "15"
            },
            {
              signaalCode: "7",
              aantalPersonen: "15"
            } ]
        } ]

    },
    {
      brinname: "Abhinav",
      aantalPersonen: "122",
      signalenVestiging: [
        {
          vestiging: "Bangalore",
          aantalPersonen: "102",
          signalenCode: [ {
            signaalCode: "7",
            aantalPersonen: "15"
          }]
        } ]

所需格式 ：

[{
  "data":
  [
    {
      "data":{
        "name":"Aamir",
        "aantalPersonen":"122",
      },
      "children":[
        {
          "data":{
            "name":"Ranchi",
            "aantalPersonen":"102",

          },
          "children":[
            {
              "data":{
                "signaalCode":"4",
                "aantalPersonen":"15",
              }
            },
            {
              "data":{
                "signaalCode":"5",
                "aantalPersonen":"10",
              }
            },

          ]
        },
        {
          "data":{
          vestiging: "Bangalore",
          aantalPersonen: "82",
          },
          "children":[
            {
              "data":{
                signaalCode: "6",
              aantalPersonen: "15"
              }
            }
          ]
        }
      ]
    }
     ,
    {
      "data":{
         brinname: "Abhinav",
      aantalPersonen: "122",

      },
      "children":[
        {
          "data":{
             vestiging: "Bangalore",
          aantalPersonen: "102",
          }
        },
       "children":[
            {
              "data":{
                "signaalCode":"4",
                "aantalPersonen":"15",
              }
            }
      ] ]
    } 

  ]
}]

那么，我該如何映射json呢？：有人可以給我一個演示示例。 這是一個新的角度，解決它遇到了很多麻煩。 這對我來說真的是很大的幫助。

Answer 1

我假設“ json結果”來自后端調用。 因此，最好，最簡單的方法是將可觀察對象映射到目標格式。

1. 您應該使用HttpClient（對后端的調用將返回可觀察到的結果）-> https://angular.io/guide/http

2. 創建一個接口，該接口將描述json對象的字段名稱（我們稱其為PersonalDetails）：

  export interface PersonalDetails {
   brinname: string,
   aantalPersonen: string,
   ...
}

可以有多個接口（json對象確實很大，因此最好拆分它並創建其他接口，這些接口將嵌套在第一個接口內）。

3. 為'prime ng tree table json'創建接口=>與上面相同，我們稱其為PrimeNgTableData

4. 創建一個函數，該函數將使用類型為'PersonalDetails'的參數（從點2開始），並將其強制轉換為第二個接口PrimeNgTableData（從點3開始）。 讓我們這樣命名該函數：

  export function asPrimeNgTableData(personalDetails: PersonalDetails): PrimeNgTableData {
   return {
      ...
    }
  }

5. 創建新的可觀察對象，它將保留primeNgTableData值：

   private personalDetails$: Observable<PersonalDetails> = this.someServiceThatCallsHttp.getPersonalDetails();

   private primeNgTableData$: Observable<PrimeNgTableData> = this.personalDetails$.pipe(
      map((personalDetails: PersonalDetails) => asPrimeNgTableData(personalDetails))
    );

6. 在您的html模板中使用primeNgTableData $（假設您要使用的html標簽稱為“ ngTable”，並且它獲取“ data”輸入，其類型為PrimeNgTableData）

  <ngTable [data]="primeNgTableData$ | async"> 
    ....
  </ngTable>