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

Question

У меня есть результат json с вложенными объектами. Мне нужно привести их к моим пользовательским объектам (первичная таблица дерева 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 следующим образом ?: Может кто-нибудь дать мне пример демонстрации. Я новичок в мире и получаю много проблем, чтобы решить это. Это было бы очень полезно для меня.

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>