Cogfkblczjmps
New Member
I am trying to convert a nested xml document to an unordered list using jquery.The xml document is\[code\]<?xml version="1.0" encoding="utf-8"?><Parent>Director <Children>Exe Director1</Children> <Children>Exe Director2</Children> <Parent>Exe Director2 <Children>Sub Director 1</Children> <Children>Sub Director 2</Children> <Parent>Sub Director 3 <Children>Cameraman 1</Children> <Children>Cameraman 2</Children> </Parent> </Parent> </Parent>\[/code\]The expected output:\[code\]<ul> <li>Exe Director1</li> <li>Exe Director2</li> <ul> <li>Sub Director 1</li> <li>Sub Director 2</li> <ul> <li>Cameraman 1</li> <li>Cameraman 2</li> </ul> </ul></ul>\[/code\]The output which I am getting.\[code\]<ul> <li>Cameraman 1</li> <li>Cameraman 2</li></ul><ul> <li>SubDirector 1</li> <li>SubDirector 2</li></ul><ul> <li>ExeDirector 1</li> <li>ExeDirector 2</li></ul>\[/code\]The html code\[code\]<!doctype html><html><head><meta charset="utf-8"><title>Untitled Document</title><script type="text/javascript" src="http://stackoverflow.com/questions/12704470/jquery.js"></script><script type="text/javascript"> var levels; $(document).ready(function() { $.ajax({ type: "GET", url: "test.xml", dataType: "xml", success: function (xml) { xmlParser($(xml)); } }); }); function xmlParser(xml) { var $ul = $("<ul>"); // For each Parent, create an <ul> $(xml).contents().each(function (i, el) { if (el.nodeType == 3) return true; if (el.nodeName.toUpperCase() == "CHILDREN") { $("<li>").text($(el).text()).appendTo($ul); // Append <li> Children } else if (el.nodeName.toUpperCase() == "PARENT") { $ul.append(xmlParser($(el))); // Recursively append the other Parent } }); $("#ListContainer").append($ul); }</script></head><body> <ul id="ListContainer"></ul></body></html>\[/code\]I am breaking my head over this code.Can you guys help me out with what might be going wrong!Thanks