:::: MENU ::::

Json To Treeview With Ajax

Json To Treeview With Ajax

Dynamic tree view from JSON object using AJAX Demo


Have you looked for JSON based treeview tutorial online? The answer for most of us will be positive. For web development treeview feature is very common these days and its better to have one or two in your niche. Now in my previous article we can see the basic platform that we can build by a nicely structured JSON object. We can get that object via an AJAX call also, but today’s topic will not cover that add-on feature at all. That’s an easy implementation and I hope you can have that on your own.

What’s The Big Deal?

Today we will go into more industry specific approach. In an actual scenario like a DMS we will be having lodes of space-stores containing content inside . Now the problem is that if we try to load all spaces and its content at page loading time, the interactivity and the usability can go for a toss. The user may feel abandoned while the server accumulates/creates the whole massive chunk of structured JSON data. In order to simplify that issue the technique that’s being followed by many web developer is Lazy Load. Now the technique is very realistic, the data is given to the user is very less and it shouldn’t overflow as per his specific requirement. That means if user needs more to know about something, then only the data should flow to the stream. So, by following this methodology we can surpass two major issues.

  1. We can forgive users their crucial time and also release some loads from the internet bandwidth.
  2. We can swiftly bypass the heavy duty that our back end has to do at one time.

Now the technique behind lazy loading is nothing but several Ajax call to back end. These calls are so fast and effective that within the blink of an eye the front end data store changes and the user knows nothing about it. The Ajax call should have a trigger attached to it. Whenever user seeks for more data, that trigger gets fired and along with it the specific Ajax call happens which actually changes the data store on the front end.

The Road Map To The Golden Valley

For this tutorial we will change the structure of the  JSON object. It will be simple by having only one level of hierarchy tree at once. We will have a pointer to those sub-child elements who are having inner sub-child. In order to get the JSON object we will be using PHP technology for simplicity.
Here we will not introduce database integration, we will have that some other time. This example is going to fetch back some static data from a specified URL.

The Journey To The Jungle

We can use this markup for our reference.


We will be working with a JSON object that will look like this:


In my demoNew.js file, while the page loads, I am calling getNodeDetails.phpvia AJAX and also passing the root node of that particular tree.


The AJAX call to the getNodeDetails.php will fetch the static JSON data to the page. We can fetch this data from database but that is not the scope of this tutorial.


After the AJAX completion we are calling buildNewTree() function. Now to completely understand buildNewTree() function, we have to define one more function folBuilder(). Both the function will collaboratively build up the tree structure for the first time.


Here all the techniques are same as my previous post, so I will not go into the deeper explanation. The modification that we have here is isFolderLink and isFolder. The first one stands for folder those are having files inside. Other one determines whether its a folder or a file.

For the next level of tree we have to define one more function expandClick(). This function handles the clicks on those tiny “+” signs that comes before folders.


For all the inner children we will be using buildChildTree() function.


Here one important thing needs to be shared. The treeview plugin has one nice feature so that we can add child nodes dynamically to it. The add method can add child nodes to the targeted parent element. We have to make sure that we are adding the animation to that also.

Lastly, for selecting any node we are using the tagClick() function and appending text to any node we are using createTextNode() as before.


That’s all, surely we can tune this example as per our need but that can be done by the readers. Check the treeview in action with AJAX here.


You can download the example Json To Treeview With Ajax, and put in your projects. I will be more than happy if that serves even one of you.

This was my work around, what is your solution for Json To Treeview With Ajax?

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)

Json To Treeview With Jquery
3 Simple Steps To Learn SASS
  • Manissh Kumar

    Very useful article. I had a scenario where i need to create a dynamic tree which loads its data from server. Objective was to display Folders and Files of user that are stored over cloud. like Google Drive. Here nodes of the tree are are different for each user and with each request the structure may change (if user deleted,added a new Folder, File to his storage space). The challenge was to make the dynamic data source to the tree. Getting a kick start from the above article, what I did is i used a jqxtree where i had an option to pass the source to the tree. in a javascript variable, which in turn was a JSON String. I’m pretty sure that same could be achieved with Treeview also. Once I get to know it how, I’ll update in this article. Thanks.

    • Indrajit Das

      Thanks Manissh for your effort. But with Treeview also you can have a Dynamic tree structure on board. Here its using its “id” attribute each time for fetching the child nodes. It doesn’t have any other dependencies.

Pride that quarells at self-breath