Search code examples
treeviewangular5angular6angular-material-5checkboxtree

How to achieve tree view from JSON data using Angular 6


I want to design a checkbox tree structure using following data coming from Web API using Angular 6. How can I achieve it please help.

[
{
    "id": 1,
    "parent_id": 0,
    "Fund_type":"A&P"   
},
{
    "id": 2,
    "parent_id": 1,
    "Fund_type": "On Invoice"
},
{
    "id": 3,
    "parent_id": 2,
    "Fund_type": "Banded packs-Consumer"
},
{
    "id": 4, 
    "parent_id": 2, 
    "Fund_type": "Banded packs-Shopper" 
},....]

Where id=1 is the root node and id=2 is the direct child of it and id=3 &4 are direct children of id=2(You can understand the structure from parent_id )

Thanks.


Solution

  • You need to change your data as per the example given below and use this component: https://www.npmjs.com/package/ngx-treeview