How to populate jstree children with object of array and get it back on click

Question

How to populate children and get its content on click of each of them

in the below code i wanted to have:

[{"cid":2091,"name":"name1","text":"Child 1"},{"cid":2095,"name":"name2","text":"A Child 2"},{"cid":2098,"name":"name3","text":"A Child 3"}]

instead of [ "Child 1", "A Child 2","A Child 3"]

i mean to say if i click Child 1 i should get {"cid":2091,"name":"name1","text":"Child 1"}

here is jsfiddle: http://jsfiddle.net/2Jg3B/2102/

$('#jstree').jstree({
        "json_data" : {
            "data" : [
                {
                    "data" : "A node",
                    "metadata" : { id : 23 },
                    "children" : [ "Child 1", "A Child 2","A Child 3"] // replace with [{"cid":2091,"name":"name1","text":"Child 1"},{"cid":2095,"name":"name2","text":"A Child 2"},{"cid":2098,"name":"name3","text":"A Child 3"}]
                },
                {
                    "attr" : { "id" : "li.node.id1" },
                    "data" : {
                        "title" : "Long format demo",
                        "attr" : { "href" : "#" }
                    }
                }
            ]
        },
        "plugins" : [ "themes", "json_data", "ui" ]
    });

   $("#jstree").bind(
        "select_node.jstree", function(evt, data){

          if(data.inst._get_parent().length <= 0 || data.inst._get_parent()===-1){
            console.log('data',data.inst.get_json());
            console.log('data.node.id',data);
          }else{
             var parent = data.inst._get_parent();
              console.log(data.inst.get_json(parent));
          }
            //selected node object: data.node;

      });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://old.static.jstree.com/v.1.0pre/jquery.jstree.js"></script>
<div id="jstree">
</div>

Please Note: if get the {"cid":2091,"name":"name1","text":"Child 1"} on click of Child 1 and so on.. plugin version can be either new or this one

Please help me thanks in advance!

Answer 1

I'm not 100% sure if this is the correct solution but it works. Basically what I did was to replace "text" with "data".

$('#jstree').jstree({
  "json_data": {
    "data": [
      {
        "data": "A node",
        "metadata": { id: 23 },
        "children": [
          {
            "data": "Child 1",
            "cid": 2091,
            "name": "name1",
            "metadata": { "id": 2091, "text": "Child 1" }
          },
          {
            "data": "A Child 2",
            "cid": 2095,
            "name": "name2",
            "metadata": { "id": 2095, "text": "A Child 2" }
          },
          {
            "data": "A Child 3",
            "cid": 2098,
            "name": "name3",
            "metadata": { "id": 2098, "text": "A Child 3" }
          }
        ]
      },
      {
        "attr": { "id": "li.node.id1" },
        "data": {
          "title": "Long format demo",
          "attr": { "href": "#" }
        }
      }
    ]
  },
  "plugins": ["themes", "json_data", "ui"]
});

$("#jstree").bind(
  "select_node.jstree",
  function(evt, data) {

    if (data.inst._get_parent().length <= 0 || data.inst._get_parent() === -1) {
      console.log('data', data.inst.get_json());
      console.log('data.node.id', data);
    } else {
      console.log(data.inst.get_json());
    }
    //selected node object: data.node;

  }
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://old.static.jstree.com/v.1.0pre/jquery.jstree.js"></script>
<div id="jstree">
</div>

Update

Based on OP's comment, we just need to track which element has been clicked? In this case, I simply removed parent from console.log(data.inst.get_json(parent));