Load JSON Data in TreeView Component

In cases where you have a custom data source that uses different field names for nodes than the ones used by the TreeView component, you can still populate the tree view with the data, but first you need to map the field names of your data source to the ones that are already in use. Here you will learn how data binding works in TreeView with custom data source, in this case a JSON file.

TreeView component is part of IntegralUI Web
a suite of UI Components for development of web apps

If you have any questions, don't hesitate to contact us at support@lidorsystems.com

This demo shows a TreeView that is populated using a JSON file as a data source. The names of the data fields are different from the ones used by the tree view. Using data binding, an object is provided which maps the custom field names with the ones that treeview uses.

Data Binding in TreeView Component

When you have a data with different field names, prior populating the TreeView you need to bind the data fields with the ones that are already in use. This is required only for fields that are already predefined.

To do the data binding, use the dataFields property of the TreeView. This property accepts an object that replaces the default field names with your own. Here is a list of fields that are predefined and already in use:

   dataFields = {
        allowDrag: 'allowDrag',
        allowDrop: 'allowDrop',
        allowEdit: 'allowEdit',
        allowFocus: 'allowFocus',
        autoCheck: 'autoCheck',
        checkBoxSettings: 'checkBoxSettings',
        checked: 'checked',
        checkState: 'checkState',
        content: 'content',
        contentVisibility: 'contentVisibility',
        contextMenu: 'contextMenu',
        enabled: 'enabled',
        expanded: 'expanded',
        hasChildren: 'hasChildren',
        icon: 'icon',
        id: 'id',
        items: 'items',
        pid: 'pid',
        selected: 'selected',
        statusIcon: 'statusIcon',
        style: 'style',
        text: 'text',
        tooltip: 'tooltip',
        value: 'value',
        visible: 'visible'
    }
                    

In this example, the data source is a JSON file where the most used field names: id, pid, expanded, items and text are replaced by different ones. As you can see from code below, the treeFields object replaces the item id to itemId, items to children, text to label etc.

Currently ReactJS doesn't have full support for Web Components. Mainly because of the way data is passed to the component via attributes and their own synthetic event system. For this reason, you can use available wrappers located under /integralui/wrappers directory, which are ReactJS components that provide all public API from specific IntegralUI component.

When new field names are in use, you also need to update the item template with the new names, based on objects from the data source.

Populate the TreeView by Loading JSON Data

Once the new data field names are provided, you can load the data from the JSON file into the TreeView. For this purpose, depending on framework of your choice (Angular, React, Vue or other), loading json data may be different. Angular uses http service, in React you can just import the data from a file or using javascript you can fetch the data from provided location. Here is an example:

Once the data is successfully loaded, a good practice is to suspend any updates of the tree view layout. This increases the loading performance, and then you can add the data using the loadData method. At last, because the layout is already suspended you need to resume it and update the TreeView.

The loadData method is also useful in cases when you need to add or update children of a single node. The second parameter of this method accepts a parent node, when specified states that the new data will add or replace the existing child nodes. In addition, the last parameter states whether the provided data is a flat list or a tree hierarchy.

When JSON data is a flat list, the id and pid fields are required so that correct parent-child relations are created. Based on this information, the tree hierarchy is automatically created from the flat list when loadData method is called.

Here is the JSON data as a flat list and a tree hierarchy.

Depending on the data format (flat list or a tree), you need to set the last parameter of the loadData method to true or false.

Conclusion

Populating the IntegralUI TreeView component with data from a custom data source like a JSON file is simple. If you have a data source that uses different names than the ones used by the tree view, you can provide an object that matches the names from your data source and the data fields in TreeView. This allows you to keep the format of your data and populate the tree view from a local or remote data source.

The TreeView is a native Web Component, part of IntegralUI Web.