Как Наблюдать карту вложенных объектов JSON с различными именами свойств - Angular

Question

У меня есть результат JSON, который вложенных объектов. Мне нужно привести их к моим пользовательским объектам (первичная таблица дерева json), которые имеют имена свойств, отличные от результата json.

JSON meesage:

{
      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 (вызов backend вернет вам Observable) -> https://angular.io/guide/http

2. Создайте интерфейс, который будет описывать имена полей объекта json (назовем его PersonalDetails):

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

Может быть несколько интерфейсов (объект json действительно большой, поэтому может быть полезно разделить его и создать другие интерфейсы, которые будут вложены в первый).

3. Создайте интерфейс для "простой таблицы дерева 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. Используйте primeNgTableData$ в вашем html-шаблоне (давайте предположим, что html-тег, который вы хотите использовать, называется ngTable, и он получает входные данные, которые имеют тип PrimeNgTableData

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