Advanced User Interface Controls and Components

IntegralUI Web

Native Angular 4 and AngularJS UI Components

TreeView / Export to JSON

This example presents how to export the data of TreeView to a JSON formatted string. You can export the data either as a flat list or a tree hierarchy, using only fields that you want to have exported.

In our example, although each item has multiple fields set, only small subset of these fields will be exported. That is only their 'id', 'pid' and text' fields will be exported. You can filter which fields you want to include in the final output in your code. The final result is shown in console window.

Note As it is shown in the console window, the exported data holds the custom names used as a replacement for default field names of item objects. For more information about binding an arbitrary data source to the TreeView, check out the Data Binding sample.

To export data, the following method is used:

  • exportToJSON(name, fields, flat, spacing) - exports the content of TreeView to a JSON formatted string

For more information check out the source code of this sample.

You can use exported data to populate the TreeView on demand from local or remote data source, by simply providing it as parameter to the loadData method.

<!DOCTYPE html>



<link rel="stylesheet" href="css/integralui.css" />

<link rel="stylesheet" href="css/integralui.treeview.css" />

<link rel="stylesheet" href="css/themes/theme-flat-blue.css" />

<script type="text/javascript" src="external/angular.min.js"></script>

<script type="text/javascript" src="js/angular.integralui.min.js"></script>

<script type="text/javascript" src="js/angular.integralui.lists.min.js"></script>

<script type="text/javascript" src="js/angular.integralui.treeview.min.js"></script>



<div ng-app="appModule" ng-controller="appCtrl">

<iui-treeview name="{{treeName}}" items="items" item-icon="itemIcon"></iui-treeview>


<label>Choose Data Structure Type:</label><br /><br />

<label><input type="radio" ng-model="exportType" value="flat" />Flat List</label>

<label><input type="radio" ng-model="exportType" value="tree" />Tree Hierarchy</label>

<br /><br /><br />

<button ng-click="export()">Export to JSON</button>






.module("appModule", ["integralui"])

.controller("appCtrl", ["$scope", "IntegralUITreeViewService", "$timeout", function($scope, $treeService, $timeout){

$scope.treeName = "treeSample";

$scope.items = [];

$scope.exportType = 'flat';

$scope.itemIcon = "icons-medium empty-doc";


$scope.dataSource = [


directoryID: 1,

name: "Favorites",

directoryIcon: "icons-medium favorites",

children: [

{ directoryID: 11, parentID: 1, name: "Desktop" },

{ directoryID: 12, parentID: 1, name: "Downloads", directoryIcon: "icons-medium downloads" }




directoryID: 2,

name: "Libraries",

directoryIcon: "icons-medium folder",

children: [


directoryID: 21,

parentID: 2,

name: "Documents",

directoryIcon: "icons-medium documents",

isExpanded: false,

children: [

{ directoryID: 211, parentID: 21, name: "My Documents" },

{ directoryID: 212, parentID: 21, name: "Public Documents" }



{ directoryID: 22, parentID: 2, name: "Music", directoryIcon: "icons-medium music" },

{ directoryID: 23, parentID: 2, name: "Pictures" },

{ directoryID: 24, parentID: 2, name: "Videos", directoryIcon: "icons-medium videos" }




directoryID: 3,

name: "Computer",

directoryIcon: "icons-medium pc",

isExpanded: false,

children: [

{ directoryID: 31, parentID: 3, name: "Local Disk (C:)" },

{ directoryID: 32, parentID: 3, name: "Storage (D:)" }



{ directoryID: 4, name: "Network", directoryIcon: "icons-medium network" },

{ directoryID: 5, name: "Recycle Bin", directoryIcon: "icons-medium recycle" }



$scope.dataFields = {

expanded: 'isExpanded',

icon: 'directoryIcon',

id: 'directoryID',

items: 'children',

pid: 'parentID',

text: 'name'




var initTimer = $timeout(function(){

$treeService.loadData($scope.treeName, $scope.dataSource, null, $scope.dataFields, false);

$treeService.selectedItem($scope.treeName, $scope.dataSource[1].children[0]);



}, 1);


var itemFields = [ 'directoryID', 'parentID', 'name' ];


$scope.export = function(){

var output = $treeService.exportToJSON($scope.treeName, itemFields, $scope.exportType == 'flat', 3);