Search code examples
javascripthtmljstree

JSTree not displaying in container

I am trying to incorporate a JSTree structure into my javascript project; however, the tree doesn't seem to be displaying/rendering in its parent container. Here is the code that I am using to display the tree:

let tree=this.tree_div.find('#treeDiv');
    tree.jstree(
        {
            "json_data": 
            {
                "data": [
                    {
                        "data": "First",
                        "children": [{"data": "First"},{"data":"Second"},{"data": "Third"}]
                    },
                    {
                        "data": "Second",
                        "children": [{"data":"First"},{"data":"Second"},{"data": "Third"}]
                    },
                    {
                        "data": "Third",
                        "children": []
                    }

                ],
            },
            "plugins": ["checkbox","themes", "html_data", "ui"]

        }
    ).bind("select_node.jstree", function(e, data){});
    console.log(tree[0]);

In this example, #treeDiv is the div that is contained by the parent container.

In the last line where the value of the tree is printed, the following line comes up in the console:

enter image description here

To my understanding, this implies that the tree is being successfully initialized and set up, but it still isn't displaying on the web page. Any input would be appreciated. Thanks.

Solution

  • The most plausible explanation here would be that you are initializing the tree using the older jsTree API, while using the newer jsTree library.

    Old JSON API: https://old.jstree.com/documentation/json_data

    New JSON API: https://www.jstree.com/docs/json/

    The newer API has a different object structure for populating the tree. Some of the functions and events remain the same, however many other things including the configuration object has changed.

    myTree.jstree({ 'core' : {
    'data' : [
       'Simple root node',
       {
         'text' : 'Root node 2',
         'state' : {
           'opened' : true,
           'selected' : true
         },
         'children' : [
           { 'text' : 'Child 1' },
           'Child 2'
         ]
      }
    ]
} });