To show depth level on each node jstree

Question

I would like to show the maximum depth level on each node (next to the text on each node), right now I have harcoded the data as below,

    $('#data').jstree({
    'core' : {
        'data' : [
            { "text" : "Root node, Depth: 2", 
                "children" : [
                    { "text" : "Child node 1, Depth: 1", 
                        "children" : [
                            { "text" : "Grand Child node 1, Depth: 0" } 
                        ]},
                    { "text" : "Child node 2,  Depth: 0" }
            ]}
        ]
    }
}); 

The depth value is hardcoded to illustrate and not available in my data, I like to generate the depth value (deeper most children) dynamically while loading the data

So In-short need something like below image, where depth value is not available on the data from server.

Answer 1

your object core seems wrong with "text" : "Root node, Depth: 2",but i assumed the object like below and then you can use recursion to get depth for each node.

var core = {
    'data' : [
        { "text" : "Root node", 
            "children" : [
                { "text" : "Child node 1", 
                    "children" : [
                        { "text" : "Grand Child node 1" } 
                    ]},
                { "text" : "Child node 2" }
        ]}
    ]
};
core.data.forEach(function(obj){
  findDepth(obj);
});

function findDepth(node){
   var maxDepth=0;
   if(node.children !== undefined){
   var depth =0;
   node.children.forEach(function(child){
         depth = findDepth(child) + 1;
         maxDepth = depth > maxDepth ? depth: maxDepth;
   })
   }
   node.text = node.text + ", Depth: " + maxDepth;
   return maxDepth;
}
console.log(core);