jsTree : How to get all nodes from jstree?

Question

How to get all nodes present in jsTree?

I am building jsTree with xml

Root
     -----A
          -----A1
               -----A1.1
               -----A1.2
          -----A2
               -----`A2.1`
               -----A2.2

     -----B
          -----B1
          -----B2

     -----C
          -----C1
               -----C1.1
               -----C2.2

I want array of all nodes(ID) present in jsTree is as follows

Expected output: [Root, A, A1, A1.1, A1.2, A2, A2.1, A2.2, B, B1, B2, C, C1, C1.1, C2.2]

Please see my answer at [jstree jquery how to iterate through all nodes](https://stackoverflow.com/a/44369074/979621). It could help with this. — SNag, Jun 06 '17 at 06:10

score 15 · Answer 1 · edited Apr 27 '12 at 08:05

15

From documentation:

.get_json ( node , li_attr , a_attr )

This function returns an array of tree nodes converted back to JSON.

More info about same function from this doc:

This function traverses the whole tree and exports it as JSON. Refer do the data sources section to see the format of the output.

If you specify a node as the first argument, only that node and its children are included in the export, otherwise the whole tree is exported.

Just search and you shall find! :)

edited Apr 27 '12 at 08:05

Mathew Thompson

55,877
15
127
148

answered Apr 24 '12 at 12:12

montrealist

5,593
12
46
68

Thanks for reply. var xml = $("#selectedTreeViewDiv").jstree("get_xml"); returns xml only. I want array of treenodes (all nodes present in jsTree) – StackOverFlow Apr 24 '12 at 17:56

MDummy · Answer 2 · 2017-08-08T07:57:51.937

7

You can traverse each node element and put it's id in an array via:

var idList = [];
var jsonNodes = $('#tree').jstree(true).get_json('#', { flat: true });
$.each(jsonNodes, function (i, val) {
    idList.push($(val).attr('id'));
})

edited Aug 08 '17 at 07:57

answered Aug 08 '17 at 07:42

MDummy

404
1
6
14

score 6 · Accepted Answer · answered Apr 27 '12 at 05:58

Solution with example :)

var xmlString = $("#tree").jstree("get_xml");   
    var xmlDOM = $.parseXML(xmlString);

    var IDList =[];
var items = $(xmlDOM).find('root item');
$.each (items, function(key, val){
    IDList.push($(val).attr('id'));
})

IDList.pop();

xmlString =

<root>  
        <item id="A" parent_id="0" state="close">  
            <content><name>Charles Madigen</name></content>                
        </item>
        <item id="A1" parent_id="A" state="close">  
            <content><name>Charles Madigen</name></content>                
        </item>
          .
          .
</root>

Output: Root, A, A1, A1.1, A1.2, A2, A2.1, A2.2, B, B1, B2, C, C1, C1.1, C2.2

:)

This does not work with current versions of jstree anymore. Because the function get_xml is not supported anymore by jstree version 3 and above. — MDummy, Aug 08 '17 at 07:44

score 1 · Answer 4 · answered Apr 13 '16 at 18:44

1

var treeData = $('#MyTree').jstree(true).get_json('#', {flat:false})
// set flat:true to get all nodes in 1-level json
var jsonData = JSON.stringify(treeData );

answered Apr 13 '16 at 18:44

M2E67

937
7
23

score 1 · Answer 5 · answered Jun 16 '19 at 12:04

I needed the same thing and came up with the below solution given that get_xml is no longer available in jstree3

function get_jstree_order(root_ul_selector, children) {
    var output = [];
    var _this = this;

    if (typeof children === 'undefined') {
        children = $(root_ul_selector).find('> li');
    }

    children.each(function() {
        if ($(this).find('ul').length > 0) {
            output.push({
                id: $(this).attr('id'),
                children: get_jstree_order(root_ul_selector, $(this).find('ul > li'))
            });

            return;
        }

        output.push({
            id: $(this).attr('id'),
            children: false
        })
    });

    return output;
}

console.log(get_jstree_order('#mytree > ul'));

Outputs (converted to JSON for readability):

[
  {
    "id": "1",
    "children": false
  },
  {
    "id": "2",
    "children": false
  },
  {
    "id": "5",
    "children": [
      {
        "id": "6",
        "children": false
      },
      {
        "id": "7",
        "children": false
      }
    ]
  },
  {
    "id": "8",
    "children": false
  },
  {
    "id": "9",
    "children": false
  },
  {
    "id": "10",
    "children": false
  },
  {
    "id": "11",
    "children": false
  }
]

Modify as needed; to include whats need, but my purpose served only to get the correct order of items for server side processing.

It's fine when lazy loading provided children id's are independent of their parents (eg, the first child of a parent always starts at 1)

jsTree : How to get all nodes from jstree?

5 Answers5

Linked