如何观察具有不同属性名称的地图嵌套json对象-Angular [英] How to Observable map nested json objects with different property names - Angular

问题描述

我有一个包含嵌套对象的json结果.我需要将它们强制转换为具有与json结果不同的属性名称的自定义对象(原始ng树表json).

I have an json result which has nested objects. I need to cast them to my custom objects ( prime ng tree table json) which have different property names than the json result.

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 ?:有人可以给我一个演示示例.这是一个新的角度，解决它遇到了很多麻烦.对我来说真的是很大的帮助.

So, how can I map the json like this?: Can some one please give me a demo example . ia m new in angular and getting a lot of trouble to solve it . It would be really great help for me.

推荐答案

我假设"json结果"来自后端调用.因此，最好和最简单的方法是将可观察对象映射到您的目标格式.

I'm assuming that the 'json result' comes from backend call. So the best and easiest way would be to map the observable to your destination format.

1. 您应该使用HttpClient(对后端的调用将使您返回可观察到的状态)-> https://angular.io/guide/http

创建一个接口，该接口将描述json对象的字段名称(我们称其为PersonalDetails):

Create an interface, that will describe json object field names (let's call it PersonalDetails):

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

可以有多个接口(json对象的确很大，因此最好将其拆分并创建其他接口，这些接口将嵌套在第一个接口中).

There can be several interfaces (the json object is really big, so it might be good to split it and create other interfaces, that will be nested inside the first one).

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

1. Create interface for 'prime ng tree table json' => same as above, let's call it PrimeNgTableData

创建一个函数，该函数将使用类型为'PersonalDetails'的参数(从点2开始)，并将其强制转换为第二个接口PrimeNgTableData(从点3开始).让我们这样命名该函数:

Create a function, that will take a parameter of type 'PersonalDetails' (from point 2.) and will cast it to second interface PrimeNgTableData (from point 3.). Let's name that function like that:

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

1. 创建新的可观察对象，它将保留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>

这篇关于如何观察具有不同属性名称的地图嵌套json对象-Angular的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！