Angular primeng organization chart from api call

I am trying to assign API value to primeng organization chart but not working. it display empty page.I have tried code as follows.

I expect assign API value to primeng organization chart and display the chart.

html


<h1>Org Chart</h1>

<p-organizationChart [value]="data1" selectionMode="single"
>
<ng-template let-node pTemplate="person">
<div class="node-header">{{node.label}}</div>
<div class="node-content">
<div>{{node.data.name}}</div>
</div>
</ng-template>
<ng-template let-node pTemplate="department">
{{node.label}}
</ng-template>
</p-organizationChart>

ts


ngOnInit(): void {
this.loadData();
}

loadData() {
this.service.getOrgChartData().subscribe(
(res) => {
this.data = res;
this.root = this.data.d.filter((obj) => obj.OrgLevel == 0)[0];
this.treeData.label = 'CEO';
this.treeData.data = { name: 'xxxx' };
this.treeData.type = 'person';
this.treeData.expanded = true;
this.treeData.children = [];
this.data1.push(this.treeData);
console.log('-- root data nnn---', this.data1);
},
(error) => {
console.log('error --', error);
}
);

Continue reading...