How to create a tree table html file usin below JSON file

Question

I am trying to create tree table html file using primeng. The Html file should able to render below JSON file .

Below is the Json response.

{
      "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"
                  }
                }
              ]
           }
          ]
        }
      ]
    }

Here the parent having "Briname" as key data element name and children node having "vestging and "Singalcode" as data element.

How we can achieve this using tree table?

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>

score 1 · Answer 1 · answered Jan 15 '19 at 02:12

1

So you want to display first property of data

Let declare _object = Object; in ts file

Then display first property on HTML file

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

Demo here

answered Jan 15 '19 at 02:12

phucnh

1,020
6
14

Because you cannot use class 'Object' on HTML but can assign it into _object – phucnh Jan 20 '19 at 11:17
can you help to map it using observable map function : https://stackoverflow.com/questions/54275822/how-to-observable-map-nested-json-objects-with-different-property-names-angula – codehunter Jan 20 '19 at 11:18
I remember i answered this question. Is it? https://stackoverflow.com/a/54200809/5737571 – phucnh Jan 20 '19 at 11:21
But how we can approach through observable map function. Also in html , we are using onject in rownode to show values, can we show data using rownode.name – codehunter Jan 20 '19 at 13:04

score 0 · Answer 2 · answered Jan 14 '19 at 22:07

0

I think property names need to be remapped and fixed.

like this:

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

answered Jan 14 '19 at 22:07

zmag

7,825
12
32
42

Then in this case BRINname and vestiging is also coming in User interface. How can i maaped nested json message to table tree Json format – codehunter Jan 15 '19 at 13:13
How can i mapped the preoperty names – codehunter Jan 19 '19 at 20:34
how can we mapped the property names in this case – codehunter Jan 20 '19 at 11:16

How to create a tree table html file usin below JSON file

2 Answers2