Export TreeView Data to JSON

IntegralUI TreeView component comes with built-in functionality that allows you to export treeview data in full or partially to JSON. You can export the tree structure in full or just a small set of selected items, as flat list or a tree hierarchy.

A sample code that shows how to export selected items from TreeView to JSON is available in JavaScript, Angular, React and Vue, in following sections below.

In above demo, TreeView is populated with some data. When pressing the Export button, the code container will show the exported data in JSON format. To select different multiple items hold CTRL or SHIFT key and click on tree items, then you can export only selected items in a flat list or as a tree hierarchy.

The complete sample code is available in Quick Start application as part of IntegralUI Web library.

How to Export Partial Data from the TreeView

To export data from the TreeView in JSON format you need to use the following method:

exportToJSON(data, fields, spacing, flat)

Where parameters are:

• data - an object that contains specific items that you want to export
• fields - an object that contains the names of item fields that needs to be exported
• spacing - specifies blank space characters to separate the exported data objects
• flat - the exported data is either a flat list or a tree hierarchy

All parameters are optional. If not set, it exports the tree view data in whole with all fields for items.

How to Export Selected Items from the TreeView

If you want to export partial data, like items that are checked or currently selected, you just need to specify the data parameter that will contain those items you want to export.

Because item used by the TreeView can have many fields (including custom fields if you are using arbitrary data source), the fields parameters allows you to specify which object fields you want to export.

To see the complete list of fields used by the tree item object, check the item object in TreeView API under Data section.

For example, let say you want to export only selected items from the TreeView. The exported data only contains basic information, like id, text and value fields.

• JavaScript
• Angular
• React
• Vue

In code above, at first we are using getList method to retrieve a list of currently selected items in the tree view. Then exportToJSON method is called where data is specified with selected items, in this example only basic information is exported, so there is no need to specify the fields parameter. As a result, the export method returns a JSON string that appears in the code container.

To select different items hold the CTRL or SHIFT keys are click on tree view items. Of 'selected only' option is checked, clicking the export button will export only selected items.

Conclusion

You can export data from IntegralUI TreeView component to JSON is simple. You need to use a built-in method that allows you to export tree view data in full or partially. You can specify what kind of data you want to export, like specific items, where exported data contains only the fields you specify. The final result can appear in JSON format as a flat list or a tree hierarchy.

TreeView is a native Web Component, part of IntegralUI Web that you can use in Angular, React, Vue and any other JavaScript framework.