LIDOR SYSTEMS

Advanced User Interface Controls and Components

Export Tree Data to JSON Object in TreeView AngularJS

Created: 03 October 2014

In order to populate the TreeView directive for AngularJS with some data you can use a local or remote data source. This data can either be created, or contained in a database or a JSON file. But how to serialize the whole tree structure back to JSON and use it when needed. In following sections we will explain how to create a JSON object using the data from AngularJS TreeView.

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





In our example we will use several add/remove methods to add some data to the TreeView. There are several methods built-in the TreeView directive which allows you to modify the tree hierarchy. To simplify our example we will use some of them.

Related: How to Add/Remove Items in TreeView for AngularJS

In demonstration above, by clicking on the ‘Add Root’ button, a root item will be added to the TreeView. To add a child item, at first select some existing item and click on ‘Add Child’ button. This will create a new item and add it as a child to currently selected item. In this way you can create the whole tree structure. If you want to remove some item, click on ‘Remove’ button, or to remove all items click on ‘Clear’ button.

angular

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

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

$scope.data = [];

$scope.treeName = "treeSample";

}]);

<!DOCTYPE html>

<html>

<head>

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

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

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

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

</head>

<body>

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

<integralui-treeview name="{{treeName}}" items="data"></integralui-treeview>

</div>

</body>

</html>

.directive

{

width: 300px;

height: 300px;

}

You can also load data into the TreeView using AJAX and a remote data source, but in our case we will stick to a simple form.

Now when we have our tree structure, we will export it in a single JSON object. To do this is simple. By using the JSON.stringify method, the whole tree hierarchy can be saved to a single JSON object. For example:

var jsonData = JSON.stringify($scope.data);

This will save all objects in tree hierarchy with all their properties in a single JSON object. However, if we want to select which object properties will be serialized, we need to create a custom function which will filter the serialized data.

In our case the result will be a JSON object where each item only includes its id, pid, text and child items properties. We have also added a three space string to be added between each field, to make the result more readable.

function replacer(key, value)

{

switch (key){

case '$$hashKey':

return undefined;

break;

case 'icon':

return undefined;

break;

case 'selected':

return undefined;

break;

case 'expanded':

if (value !== false)

return undefined;

break;

}

 

return value;

}

 

var jsonData = JSON.stringify($scope.data, replacer, ' ');

The end the result can be seen in console window.

console.clear();

console.log(jsonData);

You can also save this JSON object in a custom file or a database field, and use it later on demand. TreeView directive has a loadData method which is very useful to populate the TreeView with data on demand. In this way you can either change the whole tree structure with new data or add some custom data to a specific tree item.

Did you Like this Article?


Enter your e-mail address below and you will receive latest articles as well as news on upcoming events and special offers.