Using XML data instead of JSON data in Fancytree

Question

Does someone tried this already, I mean does someone made already a 3rd-party/extensions or patch for this? The ajax XHR object supports reading of XML data, but I guess Fancytree would need some changes or a extensions to support this format?

Answer 1

You can parse and convert an XML response in the postProcess event.

For an example, assuming this XML format:

<children>
    <node>
        <title> Node 1</title>
    </node>
    <node folder="true" expanded="true" key="42">
        <title> Node 2 (expanded folder)</title>
        <children>
            <node>
                <title> Node 2.1</title>
            </node>
            <node>
                <title> Node 2.2</title>
            </node>
        </children>
    </node>
</children>

The tree could convert the ajax responses like so:

$("#tree").fancytree({
    source: { url: "ajax-tree.xml", dataType: "xml" },
    lazyLoad: function(event, data) {
        data.result = { url: "ajax-sub.xml", dataType: "xml" };
    },
    postProcess: function(event, data) {
        // Convert the xml responses to a Fancytree NodeData list.
        // data.response is a `#document` root, so we get the outer
        // `<children>` element:
        data.result = parseFancytreeXml($(">children", data.response));
    }
});

Finally the missing sample format converter:

/** Return a list of NodeData objects, assuming $xml points to a list of nodes.
 */
function parseFancytreeXml($xml) {
    var children = [];

    $xml.children("node").each(function() {
        var $node = $(this),
            subnodes = $node.children("children");

        // Create Fancytree NodeData object from <node> element
        children.push({
            title: $node.children("title").text(),
            expanded: $node.attr("expanded"),
            folder: $node.attr("folder"),
            key: $node.attr("key"),
            lazy: $node.attr("lazy"),
            children: subnodes.length ? parseFancytreeXml(subnodes) : null
        });
    });
    return children;
}