0

我有一个包含嵌套对象的 json 结果。我需要将它们转换为我的自定义对象（prime ng tree table json），这些对象具有与 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？：有人可以给我一个演示示例。我是角度方面的新手，解决它遇到了很多麻烦。这对我来说真的很有帮助。

4

1 回答 1

1

我假设“json 结果”来自后端调用。因此，最好和最简单的方法是将 observable 映射到您的目标格式。

  1. 您应该使用 HttpClient（对后端的调用将返回一个 Observable）-> https://angular.io/guide/http

  2. 创建一个接口，它将描述 json 对象字段名称（我们称之为 PersonalDetails）：

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

可以有多个接口（json 对象非常大，因此最好将其拆分并创建其他接口，这些接口将嵌套在第一个接口中）。

  1. 为 'prime ng tree table json' 创建接口 => 同上，我们称之为 PrimeNgTableData

  2. 创建一个函数，它将采用“PersonalDetails”类型的参数（从第 2 点开始）并将其转换为第二个接口 PrimeNgTableData（从第 3 点开始）。让我们这样命名该函数：

  export function asPrimeNgTableData(personalDetails: PersonalDetails): PrimeNgTableData {
   return {
      ...
    }
  }
  1. 创建新的 observable，它将保留 primeNgTableData 值：
   private personalDetails$: Observable<PersonalDetails> = this.someServiceThatCallsHttp.getPersonalDetails();

   private primeNgTableData$: Observable<PrimeNgTableData> = this.personalDetails$.pipe(
      map((personalDetails: PersonalDetails) => asPrimeNgTableData(personalDetails))
    );
  1. 在您的 html 模板中使用 primeNgTableData$（假设您要使用的 html 标记称为“ngTable”，它获取“数据”输入，其类型为 PrimeNgTableData
  <ngTable [data]="primeNgTableData$ | async"> 
    ....
  </ngTable>
于 2019-01-20T12:21:44.803 回答