Convert string of XML tree into actual collapsible XML Tree, and then display on html ?

[sean cronin]

I have used HTML5 file reader and dom parser to read in an xml file and parse the data. Using the resulting tree I got from the reader
I now am looking for a way to convert this string back into a collapsible XML tree structure. Is there any options for doing this without
using any third party libraries, or if I need a third party library, can you recommend me one?

So imagine this is my XMl

<cars> <car> <make>Ferarri</make> <model>Enzo</model> <year>2005</year> <price>2,000,000</price> </car> </cars>

I'm looking to be able to display it like this on the html page and that I can collapse the whole lot or portion.

[sean cronin]

OK I was using innerHTML to set the XML text which I now realize was wrong, so can get the XML displaying which is good. Just need some recommendations for
making it collapsible if possible.

Cheers.

[Bear Bibeault]

I'm sure that there are plenty of jQuery plugins to do this sort of thing if you search for them. And of course, you could write such code yourself if you wanted to.

Another approach would be to just display the XML file in an iframe -- most browsers will display it as collapsible markup.

[sean cronin]

Thanks man, I'll look into them.

[sean cronin]

I managed to get this working using jstree. Documentation for it isn't the best but one small example got me going. Here's my solution:

function parsedString() { return new DOMParser().parseFromString(xmlString, "text/xml"); } function startTree(xmlTree) { // get the root node var parent = parsedString().documentElement; // get the root name str = parent.nodeName; // create a new list var newList = $('<ul>'); // create a new list item var listItem = $('<li id="root">', { class: parent.nodeName }).text(less + str + greater); // if root node has child nodes, traverse if (parent.childNodes.length > 0) { listItem = setXMLTree(parent.childNodes, listItem) } listItem.appendTo(newList); // I needed this preselect as I have a column on the page with multiple files. // The file names are paired with there corresponding XML tree String. I wanted // it so that selecting any one of the files would destroy the current one on // display, and then create a new one. The preselect is zero is only used for // the first document loaded so that it is automatically selected. Only the else // is used after. if (preselect === 0) { // initialize the new tree (#xmlTree is the id of a div) newList.appendTo('#xmlTree'); // set the div as a jstree $('#xmlTree').jstree(); } else { // destroy the current tree $.jstree.reference('#xmlTree').destroy(); // append new tree to div newList.appendTo('#xmlTree'); // set div as tree again $('#xmlTree').jstree(); } } function setXMLTree(parent, listItem) { // create new list and append to root li var newList = $('<ul>'); newList.appendTo(listItem); // get child nodes of current parent var children = parent; for (var child = 0; child < parent.length; child++) { var tempChild = children[child]; // Skip one iteration if child is invalid if (tempChild.nodeType === Node.TEXT_NODE || tempChild.nodeType === Node.COMMENT_NODE || tempChild === null) { continue; } else { // get the node name str = tempChild.nodeName; // check if the node has attributes var c = tempChild.hasAttributes(); if (c === true) { // get node attributes and append to string var attributes = tempChild.attributes; for (var i = 0; i < attributes.length; i++) { str += " " + attributes[i].name + '="' + attributes[i].value + '"'; } } // if the current child node has more that one child, recursively create new // child list, with the current child node as parent. if (tempChild.childNodes.length > 1) { var newParent = tempChild; str = newParent.nodeName; // create new list item but don't append to the new unordered list // until all child nodes have been traversed. var newItem = $('<li>', { class: str }).text(less + str + greater); newItem = setXMLTree(newParent.childNodes, newItem); newItem.appendTo(newList); } else { // check if node type is undefined if (typeof tempChild.childNodes[0] === 'undefined') { var li = $('<li>', { class: str }).text(less + str + close + greater); li.appendTo(newList) } else { var value = tempChild.childNodes[0].nodeValue; var li = $('<li>', { class: str }).text(less + str + greater + value + less + close + str + greater); li.appendTo(newList) } } } } // return the list item return listItem; }

Thanks again.

[sean cronin]

That code is not meant to be blue... It does work!