How to load data from JSON file with multiple child nodes and nested nodes

Question

Hi, our team is exploring some of synfusion react components.

We have a question regarding data binding of Tree View Component.

I retrieved data from attached screenshot JSON file which has multiple child nodes and nested nodes.

When I tried to set data to fieldsettings in TreeView Component, I found only one "child" properties. Therefore, I can bind only until CommonNodes for now.

const fields = { dataSource: data.projects, id: 'id', text: 'name', child: 'commonNodes', iconCss: 'icon'};

May I know how I can bind multiple child nodes and nested node from my JSON file in Tree View?

Or do I need to follow the structure of having one standard child node name?

Thank you.

Indhumathy Loganathan · Accepted Answer

Hi Thin,In TreeView
Hierarchical datasource type, you can able to map the child
nodes for the nodes using child property in fields.
However, the dataSource
mapped for the child property should be same with same set of properties. This
is the default TreeView structure behavior. For your reference, we have shared
a sample.https://stackblitz.com/edit/react-cju2gw?file=dataSource%2Fdefault-data.jsonYou can also refer to
the below documentation to know more about TreeView component.https://ej2.syncfusion.com/react/documentation/treeview/data-binding/#hierarchical-dataPlease check the
shared details and get back to us if you need any further assistance.Regards,Indhumathy L

Thin Sapal Yu · Answer

Thank you for your prompt reply and sharing references.Okay, I agree with you and I'll update my json file to have the child nodes with the same set of properties.

Indhumathy Loganathan · Answer

Hi Thin,Thanks for
the update. Please get back to us if you need any further assistance.Regards,Indhumathy
L