Angular treetable (Primeng tree table) - get all the parent node of the chIldren

Question

I am using primengtreetable to build a tree using angular2. Once I select a node, I want to know the 'parent node' of the selected one as weell as selected node.

In this case if i click 4 , i want to know about the data about the clicked node (4) and parent node ( Ranchi and Aamir).

What changes can be done in initial files to get the result?

Tree Table Html :

<h3 class="first">Basic</h3>
<p-treeTable [value]="data">
  <ng-template pTemplate="body" let-rowNode let-rowData="rowData">
    <tr>
      <td>
        <p-treeTableToggler [rowNode]="rowNode"></p-treeTableToggler>
        <a routerLink="/overzicht-signal/details" *ngIf="!rowNode.node.children">{{ rowData[_object.keys(rowData)[0]] }}</a>
        <span *ngIf="rowNode.node.children">{{ rowData[_object.keys(rowData)[0]]}}</span>
      </td>
      <td>{{rowData.aantalPersonen}}</td>
    </tr>
  </ng-template>
</p-treeTable>

Typescript file :

export class CollapsibleBrinVestigingComponent implements OnInit{

  signalFilter: any[]

  data: any[] = [];

  _object = Object;

  constructor( private signalService: OverzichtSignalService) { }

  ngOnInit(): void {
    //this.signalService.getFilesystem().subscribe(x => {this.responseData = x});
    this.signalFilter = this.signalService.getOverzichtSignalenOrderByBrinVestigingSignalcode();
    this.signalFilter.forEach(element => {
      let tmp: any = {
        data: {},
        children: []
      };
      Object.keys(element).forEach(prop => {
        if (prop != 'signalenVestiging') {
          tmp.data[prop] = element[prop];
        } else {
          element[prop].forEach(c1 => {
            let tmp1: any = {
              data: {},
              children: []
            };
            Object.keys(c1).forEach(prop1 => {
              if (prop1 != 'signalenCode') {
                tmp1.data[prop1] = c1[prop1];
              } else {
                c1[prop1].forEach(c2 => {
                  tmp1.children.push({ data: c2 });
                });
              }
            });
            tmp.children.push(tmp1);
          });
        }
      });
      this.data.push(tmp);
    });

  }

}

Service class

@Injectable()
export class OverzichtSignalService {

  const BRINSIGNAALFILTER = [
    {
      "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"
            }
            ]
        }
        ]
    }
    ]

  constructor(private http: HttpClient) {
  }


  getOverzichtSignalenOrderByBrinVestigingSignalcode() {
    return BRINSIGNAALFILTER;
  }

} 

From the service class it return the Json messages in a format which formatted it in tree- table structure ( primeng) Json format and USE IT TO HTML file to show the data.

Answer 1

Here is example with one parent. (For removing route (e.g. node)).

template

    <p-tree [value]="routes"
            layout="horizontal"
            selectionMode="single"
            [(selection)]="selected">
    </p-tree>

    <a class="btn btn-primary"
           (click)="removeRoute(selected)">Remove Page</a>

component

removeRoute(node) {
   const parent: any = this.findById(this.routes, node.parentId);
   const index = parent.children.findIndex(c => c.id === node.id);

   parent.children.splice(index, 1);
 }

 findById(data, id) {
   for (const node of data) {
     if (node.id === id) {
       return node;
     }

     if (node.children) {
       const desiredNode = this.findById(node.children, id);
       if (desiredNode) {
         return desiredNode;
       }
     }
   }
   return false;
 }

Answer 2

i am able to get the soution.

I have used onNodeSelect api from Treenode. On click of node, i m just checking the node has any child node or not. If they dont have, i am getting last child node data using event.node.data and then calling a fuction and traverse back to parent and getting the data of parent.

 nodeSelect(event) {
    if(!event.node.children) {
      this.signalenCodeNode = event.node.data
      this.getParentDetails(event.node)
    }
  }


  getParentDetails(node: TreeNode) {
    if(node.parent){
      this.signalenVestigingNode= node.parent.data
       if(node.parent.parent){
         this.signalenBrin= node.parent.parent.data
       }
    }
  }

HTML :

<h3 class="first">Basic</h3>
<p-treeTable [value]="data" selectionMode="single" [(selection)]="selectedNode" (onNodeSelect)="nodeSelect($event)">
  <ng-template pTemplate="body" let-rowNode let-rowData="rowData">
    <tr >
      <td [ttSelectableRow]="rowNode" >
        <p-treeTableToggler [rowNode]="rowNode"></p-treeTableToggler>
        <span>{{ rowData[_object.keys(rowData)[0]] }} </span>
      </td>
      <td>{{rowData.aantalPersonen}}</td>
    </tr>
  </ng-template>
</p-treeTable>