Multi Level xml to unordered list in jquery

javascript, jquery

Solution

Recursively construct the unordered list:

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 {
           $ul.append(xmlParser($(el))); // Recursively append the other Parent
        }
    });
    return $ul;
}

Here's a DEMO. Think of each group `Parent` and respective `Children` as a separate unit. For example, if your XML looked like the following:

<Parent>Director
    <Children>Exe Director1</Children>
    <Children>Exe Director2</Children>
</Parent>

The resulting HTML would be:

<ul>
    <li>Exe Director1</li>
    <li>Exe Director2</li>
</ul>

How would you construct this? It's quite simple: create an `<ul>` element, and for each `Children` append a `<li>` element to it. Now, for the recursive part, when you introduce another `Parent`, you simply create another `<ul>` again is if it were a single unit, and append its result to the parent `<ul>`.

Note that the function that I've used above requires a jQuery object to passed as an argument, thus you'd need to change your `success` handler:

success: function (xml) {
  xmlParser($(xml));
}

Problem

I am pulling my hair out trying to create an unordered list from an xml file with no luck so far.I know how to process the xml from jQuery but I am not able to figure out how to make the multi-level unordered list. Here is what I have achieved so far. The xml file ``` <?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> ``` The html file ``` <!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> var levels; $(document).ready(function() { $.ajax({ type: "GET", url: "test.xml", dataType: "xml", success: xmlParser }); }); function xmlParser(xml) { $(xml).find("Children").each(function() { var text = $(this).text(); }); } </script> </head> <body> <div id="ListContainer"></div> </body> </html> ``` This is the expected list ``` <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> ``` Can you guys please help me out! Edit: ``` <!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <script type="text/javascript" src="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) { //alert($(xml).contents()); 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 { $ul.append(xmlParser($(el))); // Recursively append the other Parent } //$("#ListContainer").append($ul); }); //alert($ul.html()); $("#ListContainer").append($ul); } </script> </head> <body> <div id="ListContainer"></div> </body> </html> ```

Original source