Getting JSON data of JSTree, and it's metadata

Question

We're using jstree for a navigation menu editor, and have been assigning metadata to the nodes of the tree like this:

var data = currentNode.data("jstree");
data.title = textBoxTitle.val();
data.linkType = textBoxLink.val();

I can see that the data object contains the relevant properties, but not too sure where jquery keeps the associated data after this point.

When we come to save the data (serializing it to our server-side language), the metadata seems to be ignored...

var json = jQuery.jstree._reference(tree).get_json();
var jsonString = JSON.stringify(json);

The json object is inspected to have no property describing the metadata.

How do we serialize the object along with its metadata?

Thanks in advance,

• Greg.

Answer 1

Reading the documentation briefly, it looks to me as if you should be using attributes on the nodes to store your metadata. You could use HTML5 "data-" attributes:

currentNode.attr('data-title', textBoxTitle.val());
currentNode.attr('data-link-type', textBoxLink.val());

then when you do the .get_json() from the tree you tell it what attributes you want:

var json = jQuery.jstree._reference(tree).get_json(-1, ['data-title', 'data-link-type', 'id', 'class']);

The .get_json function actually takes 2 lists of attribute names, one for <li> nodes and one for <a> nodes (in that order). I don't know what your tree looks like so I'm not sure where your attributes would go. (Also that leading "-1" argument tells it to get the whole tree, which you were doing previously by just passing nothing.)