How To Populate Jstree Children With Object Of Array And Get It Back On Click

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','

Solution 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));