CODEWITHSUNDEEP
javascriptjqueryhtmljsonjstree
JSON
JSON

Reputation: 21

How to give child nodes an 'id' with JSON in jsTree

I've got a tree which has been populated through JSON like so (please excuse the formatting):

$("#treeView").jstree({
          "themes": {
              "theme": "default",
                "dots": false,
                  "icons": false
                   },
           "json_data": {
                "data": [
        {
        "data": "2011",
        "metadata": { id: 2011 },
        "children": [

{ "data": "January", "attributes": { "id": "jan_2011"} },
{ "data": "February", "attributes": { "id": "feb_2011"} },
{ "data": "March", "attributes": { "id": "mar_2011"} },
{ "data": "April", "attributes": { "id": "apr_2011"} },
{ "data": "May", "attributes": { "id": "may_2011"} },   
{ "data": "June", "attributes": { "id": "jun_2011"} },
{ "data": "July", "attributes": { "id": "jul_2011"} },
{ "data": "August", "attributes": { "id": "aug_2011"} },
{ "data": "September", "attributes": { "id": "sep_2011"} },
{ "data": "October", "attributes": { "id": "oct_2011"} },
{ "data": "November", "attributes": { "id": "nov_2011"} },
{ "data": "December", "attributes": { "id": "dec_2011"} }
]
                }]
                    },
                    "plugins": ["themes", "json_data", "ui"]
                }).bind("select_node.jstree", function (e, data) {
                    alert(data.rslt.obj.data("id"));
                });
            });

My problem is that whenever a node is clicked, the alert box does not display anything, or simply 'undefined'. In other words, I think the 'id' attributes are not being set for the children nodes.

Any ideas?

Upvotes: 2

Views: 5486

Answers (2)

BiLaL
BiLaL

Reputation: 690

I faced the same situation i.e. Using JSON data-source and unable to get the id with a pretty simple and straight forward statement that is even mentioned in the site documentation ( btw, I personally feel that the documentation of jsTree is not up to the mark of its highly loaded features)

alert(data.rslt.obj.data("id"));

after hours of searching and point by point debugging the difference was figured out to be a single word. Use attr instead of full word attributes i.e. 

{ "data": "January", "attr": { "id": "jan_2011"} },

Upvotes: -1

Luffy
Luffy

Reputation: 2337

Simply use "attr" instead of "attributes". Here is the jsfiddle link.

Upvotes: 2

Related Questions