Load Data in Angular TreeView from a Custom JSON File

Created: 27 Feb 2019

In cases where you have a data source that uses different names for tree objects than the ones used by the Angular TreeView, 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. In this article you will learn how to bind the data fields between the TreeView and a custom data source.

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 tree view uses.

Data Binding in Angular TreeView

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 angular TreeView. This property accepts an object that replaces the default field names with your own. Here is a list of fields that are already in use:

     dataFields = {
        allowDrag: 'allowDrag',
        allowDrop: 'allowDrop',
        allowEdit: 'allowEdit',
        allowFocus: 'allowFocus',
        canSelect: 'canSelect',
        enabled: 'enabled',
        expanded: 'expanded',
        hasChildren: 'hasChildren',
        icon: 'icon',
        id: 'id',
        items: 'items',
        pid: 'pid',
        selected: 'selected',
        style: 'style',
        text: 'text',
        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, the treeFields object replaces the item id to itemId, items to children, text to label etc.

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

public treeFields: any = {
    id: 'itemId',
    expanded: 'isExpanded',
    pid: 'parentId',
    items: 'children',
    text: 'label'
}
                            
<div class="app-block" #application>
    <iui-treeview [controlStyle]="ctrlStyle" [items]="items" [dataFields]="treeFields" [allowAnimation]="true" #treeview>
        <ng-template let-item>
            <span [ngClass]="item.icon"></span>
            <span class="trw-dfjson-label">{{item.label}}</span>
        </ng-template>
    </iui-treeview>
</div>
                            

Populate the TreeView by Loading Data from a JSON file

Once the new data field names are provided, you can load the data from the JSON file in the angular TreeView. For this purpose you can use the angular http service, like in this example.

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

private loadFromJSON(){
    let self = this;

    // Use HTTP service to get data from the specified JSON file
    self.http.get("./assets/file.json").subscribe((data: Array) => {
        // Suspend the tree layout from updates, to increase performance
        self.treeview.suspendLayout();

        // Load data into the tree view
        self.treeview.loadData(data, null, self.treeFields, false);

        // Resume and update the tree layout
        self.treeview.resumeLayout();
    });
}
                            
[
    { "itemId": 1, "label": "Solution 'Application1' (1 project)", "icon": "project-icons solution" },
    { 
        "itemId": 2,
        "label": "Application1",
        "icon": "project-icons documents",
        "children": [

        // . . .
        // 
        // You can find the full content of this file in sample project on StackBlitz: https://stackblitz.com/edit/integralui-treeview-data-fields-json
                            

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

Conclusion

Data binding in IntegralUI TreeView for Angular is simple. If you have a data source that uses different names than the ones used by the tree view or some names are already taken, 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 local or remote data source.

The TreeView component is part of IntegralUI Web.

Newsletter


Sign-up to our newsletter and you will receive news on upcoming events, latest articles, samples and special offers.
Name: Email: *
*By checking this box, I agree to receive a newsletter from Lidor Systems in accordance with the Privacy Policy. I understand that I can unsubscribe from these communications at any time by clicking on the unsubscribe link in all emails.