'Populate jsTree from external JSON file

I've been experimenting with the jQuery.jsTree library and need some help. Please could someone advise me on how to read json_data from an external .json file.

$("#treeDemo").jstree({ 
    "plugins" : [ "themes", "json_data", "ui", "types" ],

    //"json_data": {
    //  "ajax" : {
    //      "url" : "Series.json"
    //  }
    //},

    "json_data" : {
        "data" : [{"data":"Series 1","children":[{"data":"Season 1","children":[{"data":"Episode 1.avi","attr":{"rel":"file"}},{"data":"Episode 2.avi","attr":{"rel":"file"}},{"data":"Episode 3.avi","attr":{"rel":"file"}}],"attr":{"rel":"folder"}},{"data":"Season 2","children":[{"data":"Episode 4.avi","attr":{"rel":"file"}},{"data":"Episode 5.avi","attr":{"rel":"file"}}],"attr":{"rel":"folder"}}],"attr":{"rel":"folder"}},{"data":"Series 2","children":[{"data":"Season 1","children":[{"data":"Episode 1.avi","attr":{"rel":"file"}},{"data":"Episode 2.avi","attr":{"rel":"file"}},{"data":"Episode 3.avi","attr":{"rel":"file"}},{"data":"Episode 4.avi","attr":{"rel":"file"}}],"attr":{"rel":"folder"}}],"attr":{"rel":"folder"}},{"data":"Series 3","children":[{"data":"Episode 1.avi","attr":{"rel":"file"}},{"data":"Episode 2.avi","attr":{"rel":"file"}}],"attr":{"rel":"folder"}},{"data":"Series 1","children":[{"data":"Episode 1.avi","attr":{"rel":"file"}}],"attr":{"rel":"folder"}},{"data":"Series 2","children":[{"data":"Episode 1.avi","attr":{"rel":"file"}},{"data":"Episode 2.avi","attr":{"rel":"file"}}],"attr":{"rel":"folder"}}]
    },

    "types" : {
        "max_depth" : -2,
        "max_children" : -2,
        "valid_children" : ["drive"],
        "types" : {
            "folder" : {
                "valid_children" : ["default", "folder"],
                "icon" : {
                    "image" : "images/folder.png"
                }
            },
            "file" : {
                "valid_children" : "none",
                "icon" : {
                    "image" : "images/file.png"
                }
            }
        }
    },

    "themes" : {
        "theme" : "default",
        "url" : "themes/default/style.css",
        "dots" : true,
        "icons" : true
    },

    "search" : {
        "case_insensitive" : true,
        "ajax" : {
            "url" : "/static/v.1.0pre/_docs/_search_result.json"
        }
    }

})

So the above code works as the jsTree should. The commented json_data plugin is suppose to read the exact same JSON data from the specified 'Series.json' file however, when the code is run, only the loading gif is displayed.

Please help.

Thanks in advance, Grant

Solution 1:^[1]

this seems like a common issue. Anyways, make an ajax call to fetch the required json file as shown below.

"json_data":{
    "ajax" : {
        "url" : "info.json"  // the URL to fetch the data. Use relative url if required
     }
}

this would definitely work!

Cheers!

Solution 2:^[2]

I just tried the above examples and they don't work for me. The following in the github examples code, works fine:

$('#ajax').jstree({
    'core' : {
        'data' : {
            "url" : "./root.json",
            "dataType" : "json" // needed only if you do not supply JSON headers
        }
    }
});

Solution 3:^[3]

Please advise if anyone had it worked. I'm having the same issue as originally Grant was having and none of the suggestions worked for me. The html and json files are located in the Desktop folder. Provided my json and jstree code here. Thank you for your valuable time and solutions!!

$("#DocumentorTree").jstree({

            "core": {
                //"themes": {
                //    "responsive": false
                //},
                // check_callback is set as true to enable the context menu (CREATE, DELETE, ETC.)
                // data source is currently hard-coded for demo purpose. Will need to work with a JSON source for dynamic changes of data.
                //"check_callback": true,
                "data":

                {
                
                            "url": "path.json",
                    "dataType": "JSON" // needed only if you do not supply JSON headers
                }
                        
                    
            },
            "types": {
                "default": {
                    "icon": "fa fa-folder text-primary"
                },
                "file": {
                    "icon": "fas fa-file  text-primary"
                }
            },
            "search": {
                "case_insensitive": true,
                "show_only_matches": true
            },
            "state": { "key": "demo2" },
            "plugins": ["json_data", "contextmenu", "checkbox", "search", "state", "types"]
            // These plugins help with the context menu at right-click, adding checkboxes to each item, search functionality

        });

DATA IN JSON FILE:

{ "id": 1, "text": "Root node 2", "state": { "opened": true, "selected": true }, "children": [ { "id": 2, "text": "Child 1" }, "Child 2" ] } ]

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Teja
Solution 2	FerranB
Solution 3	Kathiravan Manimozhi

'Populate jsTree from external JSON file

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]