How to create jstree based on json Data?

Question

I am creating JsTree with json Data. the tree is created upto second level but after second the tree is not populated. I want to recursively call the function to add leaf to it until leaf doesnt exit. Below is my Json:

[ {
  "id" : 25,
  "name" : "Output",
  "path" : "/",
  "type" : "folder",
}, {
  "id" : 26,
  "name" : "Templates",
  "path" : "/",
  "type" : "folder",
}, {
  "id" : 27,
  "name" : "Temp",
  "path" : "/Output/",
  "type" : "folder",
}, {
  "id" : 28,
  "name" : "December",
  "path" : "/Output/",
  "type" : "folder",
}, {
  "id" : 29,
  "name" : "ParameterDOC",
  "path" : "/Templates/DecemberTemplates/",
  "type" : "Doc",
}, {
  "id" : 30,
  "name" : "SimpleDoc",
  "path" : "/Templates/DecemberTemplates/",
  "type" : "Doc",
}, {
  "id" : 31,
  "name" : "DecemberTemplates",
  "path" : "/Templates/",
  "type" : "folder",
}, {
  "id" : 32,
  "name" : "NovemberTemplates",
  "path" : "/Templates/",
  "type" : "folder",
} ]

and code is:

function createTreeForDoc(jsonData,path,id){
for(var i=0; i < jsonData.length;i++){
     if(jsonData[i].path == path){
         $("<li id="+jsonData[i].name+" class=\"lib\" rel="+jsonData[i].path+" data-jstree='{\"icon\":\"images/"+jsonData[i].type+"_small.png\"}' >"+jsonData[i].name+"</li>").appendTo("#maptree"); 
         createSubTree(jsonData,jsonData[i].path+jsonData[i].name+"/",jsonData[i].name,i);
     }
}

    $('#rptTree').jstree({ 
         "plugins" : ["types"],
         "core" : { "check_callback" : false, "themes" : { "dots" : false }, },

         }); 
}

function createSubTree(jsonData,path,gid,counter){
 $("<ul id=\"test"+counter+"\"></ul>").appendTo("#"+gid); 

for(var i=0; i < jsonData.length;i++){

    if(jsonData[i].path == path ){
         $("<li id="+jsonData[i].name+" class=\"lib\" rel="+jsonData[i].path+" >"+jsonData[i].name+"</li>").appendTo("#test"+counter); 

     }
}
}

and right now i am getting out this:

so this creates till second level third level is not created how to recursively call a function to create all other level to end.

Answer 1

I am not able to get what you are trying to do ,but by looking your json data you can do in the following way.Here I am using a recursive function:

function filterData(globalData,parentPath){
var result=[];
for(var i =0; i<globalData.length;i++){
    if(globalData[i].path == parentPath){
        result.push(data[i]);
    }
}
return result;
}


function renderTree(data,parentNodeId)
{

    for (var i=0; i<data.length;i++)
      {

         if(data[i].type == 'folder')
          {
            $("<li id="+data[i].name+ ">"+data[i].name+"</li>").appendTo($('#'+parentNodeId));

           var childNodes=filterData(globalData,data[i].path+data[i].name+"/");
           if(childNodes.length > 0)
              {
                $("<ul id="+data[i].path+data[i].name+"></ul>").appendTo($('#'+data[i].name));
               renderTree(childNodes,data[i].path+data[i].name);    
              }

           }
       else
           {
        $("<li id="+data[i].name+">"+data[i].name+"</li>").appendTo($('#'+parentNodeId));
            }
}

hope it will work.

Answer 2

You have to use a recursive function to build your tree. This function should look like:

function recursive(jsonData,parent,counter=0)
{
     $("<li id="+parent.path+parent.name+" class=\"lib\" rel="+parent.path+" >"+parent.name+"</li>").appendTo("#test"+counter); 
     counter = 0;
     for(a = 0; a<jsonData.length; a++)
     {
         if((parent.path+ parent.name) == jsonData[a].path)
         {
             $("<li id="+jsonData[a].path+jsonData[a].name+" class=\"lib\" rel="+jsonData[a].path+" data-jstree='{\"icon\":\"images/"+jsonData[i].type+"_small.png\"}' >"+jsonData[a].name+"</li>").appendTo("#maptree");

             if(jsonData[a].type == "folder")
             {
                 recursive(jsonData,jsonData[a],counter);
             }
         }
     counter++;
     }
}

This is an example, i'm notsure it works but it might be close enought for you to enhance it. :)

Good luck...