[FIXED] How to shape the data source for PrimeNG Tree (P-Tree) Component?

Issue

I am very new to the Angular and PrimeNG components. I want to build a tree view with children nodes, and PrimeNG offered the solution out of the box with the component. However, all the examples have hard-coded data sources. In my case, the data source is from the database, and I don’t know if I have to shape my data to match what the P-Tree expected (see below). If yes, what is the technique for doing it?

Here is an example of the data source for P-Tree.

{
            "label": "Pictures",
            "data": "Pictures Folder",
            "expandedIcon": "pi pi-folder-open",
            "collapsedIcon": "pi pi-folder",
            "children": [
                {"label": "barcelona.jpg", "icon": "pi pi-image", "data": "Barcelona Photo"},
                {"label": "logo.jpg", "icon": "pi pi-file", "data": "PrimeFaces Logo"},
                {"label": "primeui.png", "icon": "pi pi-image", "data": "PrimeUI Logo"}]
}

Solution

My question is resolved. A recursive method was used to build a tree hierarchy with the parent ID as root and the children belong the parent. A data table is passed into the method as the parameter. The method iterates through the entire data table.

          foreach (DataRow dr in dtData.Select("ParentID = '" + ID+ "'"))
            {
                // recursive
                folder.children.Add(
                    new ChildFolder()
                    {
                        label = dr["Name"].ToString(),
                        children = GetChildren(Convert.ToInt32(dr["ID"]), dtData),
                        data = Convert.ToString(dr["ID"])
                    });
            }

            return folder;

Answered By – AngularNewbie

Answer Checked By – David Marino (Easybugfix Volunteer)

Leave a Reply

(*) Required, Your email will not be published