:::: MENU ::::

Json To Treeview With Jquery

Json To Treeview With Jquery

Dynamic tree view from JSON object using jQuery Demo

Some time back one of my friend asked me that he has this specific need of getting a tree view from a parsed JSON object for some of his personal work. I googled a lot to get something similar like my friend’s need. Yaa, I do that every time when there is a need to get a job done, probably we all do the same. But the sad part is I didn’t get that entirely.      There are lot of plugins out there available , some of them are not expecting JSON data and some of them need complex configuration. So I decided to tweak some of the plugin to get that functionality. There is one famous plugin treeview which seemed to be very promising and the look and feel it provides is really cool, that’s why I took it for the job. This particular plugin needs one HTML unordered list element and modifies it to a beautiful tree view.

The Show Stopper For Treeview

The markup seemed to be the actual hurdle for me. So first I observed how the markup structure should be made so that it can be used by the plugin. The plugin needs something like:

For my case I need to make a similar structure via Jquery before using the plugin itself. The data for this structure will be coming from a nicely structured JSON object and after grinding it through my “list creator method” I should be getting the list structure. At the end, the list id should be pushed through the plugin’s init method to get that treeview.

The Thought Process

In Extjs very often we use treeview, for generating the same we use similar technique. The first thing that came to my mind was that JSON structure itself should be self-explanatory. After putting some time I came up with this guy:

Now, from this JSON object to a fine tuned tree view transformation took me some couple of hours, it was a trial and error procedure but finally I made it. Here I will tell you guys how it happened.

The Juice Of Sugarcane

The HTML would be pretty simple:

Here I will be targeting the #StudentTree element for the tree view.

In my demo.js file, while the page loads, I have my buildTree(jsonObj) function call ready with the jsonObj object as its parameter.

Now in order to define buildTree(), we will separate it’s three specific character. Those are:

1. Folder Creation, will be defined in folBuilder().
2. File Creation, will be defined in filBuilder().
3. Folder or File Text Creation, will be defined in createTextNode().


The buildTree() function defined below:

Inside our buildTree() we have an unordered list as a top most parent. We are setting its primary attribute, along side we are traversing through our JSON object and for each top most child we are having one list item. To get that folder/file image we are placing one span tag inside the list item. The JSON object is carrying the data whether it’s a folder or a file. For text node to append we are calling createTextNode() afterwards. For inner folder/file we are getting another unordered list and calling folBuilder() and filBuilder() accordingly. In each traverse we’re adding up the elements and after completion finally we are placing it into #StudentTree element. Afterwards we are attaching the treeview plugin to #StudentTreeRoot node.


The folBuilder() function is defined below:

Inside folBuilder() the first parameter obj is actually the ChildSubSet from the parent element. Here we are traversing it like previously we did and checking again whether it’s a folder or a file. Also if it’s a blank folder we have a separate code block for that.


The filBuilder() function is defined below:

In the filBuilder() we are checking whether the very first element of the extreme parent node is a file or not. If the first guy is a file then we are traversing the whole object. On the other hand if that’s not the case we are assuming it as the last point to traverse.


The createTextNode() is defined below:

Inside createTextNode() we are adding up one span tag for holding the text node and pushing it to it’s parent element. Finally its being returned to its caller.

And there are lot of complex logic still has to come up, but not now, not today. So that will be all for the day. Here is the Demo page where you can check out the treeview in action.


You can download the treeview plugin and do some play around with that. After having a fair idea on that you can have my demo.js in place. You can modify the JSON data for your need, Yaa that’s the purpose of a JSON object but you have to make sure you are following the basic structure. Just in case, if you have any blank folder you still need to have a blank ChildSubSet. I hope you have found this tutorial interesting! While we are about to hear the closing bell you still can check out my previous post about pseudo elements and share your thoughts about that. If you have any suggestions or any thing, burst them out on the comment section below, Please :).


Indrajit Das
Follow me

Indrajit Das

Co-founder of CodeStrive [ Kind of a seeker for new dimensions in WEB world, sort of a Thinker, Blogger, Die-Hard Coder, Wash-Room Singer, Football Player, Gamer, Guitar Player, Cartoonist and the list goes on.. ]
Indrajit Das
Follow me

Latest posts by Indrajit Das (see all)

Learn And Use Magical :before and :after Pseudo-Elements In CSS
Json To Treeview With Ajax
Pride that quarells at self-breath