Display XML in tree format using Javascript

Display XML in tree format using Javascript

• personal : Personal Details
  • name : Premshree Pillai
  • sex : male
  • websites : Websites
    • ws1 : http://www.qiksearch.com
    • ws2 : http://premshree.resource-locator.com

Algorithm :

• Read the XML file
• We point a variable, tree to the first node (XML tag) of the XML data.
• If the node has child nodes :
  • Print "<ul><li>";
  • For each child node, traverse(tree.childNodes(nodeNum))
  • Print "</li></ul>";
• If the node does not have any child :
  • Print the node's value.

Script and explanation :

var xmlDoc=new ActiveXObject("Microsoft.XMLDOM");

function loadXML(xmlFile) {
	xmlDoc.async="false";
	xmlDoc.onreadystatechange=verify;
	xmlDoc.load(xmlFile);
}

function verify() { 
	if(xmlDoc.readyState!=4)
		return false; 
}

• 0 - Object is not initialized
• 1 - Loading object is loading data
• 2 - Loaded object has loaded data
• 3 - Data from object can be worked with
• 4 - Object completely initialized

function traverse(tree) {
	if(tree.hasChildNodes()) {
		document.write('<ul><li>');
		document.write('<b>'+tree.tagName+' : </b>');
		var nodes=tree.childNodes.length;
		for(var i=0; i<tree.childNodes.length; i++)
			traverse(tree.childNodes(i));
		document.write('</li></ul>');
	}
	else
		document.write(tree.text);
}

function initTraverse(file) {
	loadXML(file);
	var doc=xmlDoc.documentElement;
	traverse(doc);
}

initTraverse("anyXMLfile.xml");