Как создать HTML-файл таблицы дерева, используя файл JSON

Question

Я пытаюсь создать HTML-файл таблицы дерева, используя primeng. HTML-файл должен отображаться ниже JSON-файла.

ниже Json ответ.

{
      "data": [
        {
          "data": {
            "Briname": "Aamir",
            "aantalPersonen": "122"
          },
          "children": [
            {
              "data": {
                "Vestiging": "Ranchi",
                "aantalPersonen": "102"
              },
              "children": [
                {
                  "data": {
                    "Singalcode": "4",
                    "aantalPersonen": "15"
                  }
                },
                {
                  "data": {
                    "Singalcode": "5",
                    "aantalPersonen": "10"
                  }
                }
              ]
            },
            {
              "data": {
                "Vestiging": "Bangalore",
                "aantalPersonen": "82"
              },
              "children": [
                {
                  "data": {
                    "Singalcode": "6",
                    "aantalPersonen": "15"
                  }
                }
              ]
            }
          ]
        },
        {
          "data": {
            "Briname": "Abhinav",
            "aantalPersonen": "122"
          },
          "children": [
            {
              "data": {
                "Vestiging": "Bangalore",
                "aantalPersonen": "102"
              },
              "children": [
                {
                  "data": {
                    "Singalcode": "4",
                    "aantalPersonen": "15"
                  }
                }
              ]
           }
          ]
        }
      ]
    }

Здесь родитель, имеющий "Briname" в качестве имени ключевого элемента данных и дочерний узел, имеющий "vestging и" Singalcode "в качестве элемента данных.

Как мы можем добиться этого, используя древовидную таблицу?

HTML

<p-treeTable [value]="files2" [columns]="cols" selectionMode="single" [(selection)]="selectedNode1" (onNodeSelect)="nodeSelect($event)">
  <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns" >
    <tr [ttSelectableRow]="rowNode">
      <td *ngFor="let col of columns; let i = index">
        <p-treeTableToggler [rowNode]="rowNode" *ngIf="i == 0"></p-treeTableToggler>
        {{rowData[col.field]}}
      </td>
    </tr>
  </ng-template>
</p-treeTable>

Answer 1

Итак, вы хотите отобразить первое свойство data

Позвольте объявить _object = Object; в файле TS

Затем отобразить первое свойство в файле HTML

{{ rowData[_object.keys(rowData)[0]] }}

Демо здесь

Answer 2

Я думаю, что имена свойств должны быть переназначены и исправлены.

как это:

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