Menu
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>
962
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));
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
