CODEWITHSUNDEEP
javascriptjsonjstree
Mr x
Mr x

Reputation: 866

load data from external json file in jstree

I would like to pass json data to jstree object from external file. I have following snippet but it doesn't works

<script>
            $.jstree.defaults.core.themes.responsive = true;
$('#frmt').jstree({
    plugins: ["checkbox", "types"],
    "json_data":{
    "ajax" : {
        "url" : "D:\p\web\nodes.json"  // the URL to fetch the data. Use relative url if required
     }
},
       "types": {
        "file": {
            "icon": "jstree-file"
        }
    }
});
</script>

My nodes.json file

[
 {
  "id": "ajson1",
  "parent": "#",
  "text": "Simple root node"
}, 
{
  "id": "ajson2",
  "parent": "#",
  "text": "Root node 2"
}, {
  "id": "ajson3",
  "parent": "ajson2",
  "text": "Child 1"
}, {
  "id": "ajson4",
  "parent": "ajson2",
  "text": "Child 2"
}
]

When I insert this data manually in javascript then it works fine but when I assign the path of nodes.json external file at that time it doesn't works

Upvotes: 2

Views: 2314

Answers (1)

dave4jr
dave4jr

Reputation: 1454

Which version of jstree are you using? Current version is 3.3.1. Older versions had a plugin called json_data, and you needed to include "json_data" in your plugins list. If using the newest version, you don't need to use "json_data", you can just use "url". See example below:

$('#tree').jstree({
    'core' : {
        'data' : {
            'url' : function (node) {
                return node.id === '#' ? 'ajax_roots.json' : 'ajax_children.json';
             },
            'data' : function (node) {
                return { 'id' : node.id };
            }
         }
    });

Hope that helps.

Upvotes: 3

Related Questions