Thursday, January 12, 2012

Form XML string by recursively traversing an un-ordered list


I need a jQuery/JavaScript function to form an XML string from an un-ordered list



This is the HTML




<ul>
<li>
<input class="checktree" type="checkbox"/>
<label>PhoneNumbers</label>
<ul>
<li>
<input class="checktree" type="checkbox"/>
<label>PhoneNumber</label>
<ul>
<li>
<input class="checktree" type="checkbox"/>
<label>number</label>
</li>
</ul>
<ul>
<li>
<input class="checktree" type="checkbox"/>
<label>type</label>
</li>
</ul>
</li>
</ul>
</li>
</ul>



This is the code I have now



NOTE: item is the un-ordered list jQuery object; xml is a global var




function loadXml(item) {
$(item).children('li').each(function () {
var li = $(this);
if (null != li) {
var label = li.find('label');
if (null != label && label.html() != null) {
xml += '<' + label.html() + '>';
var lisize = li.children("ul").length;
for (var i = 0; i < lisize; i++) {
loadXml(li.children("ul").get(i));
}
xml += '</' + label.html() + '>';
}
}
});
}



But the above code doesn't work properly. It generates duplicates. Below is an example of its output:




<PhoneNumbers><PhoneNumber><number></number><type></type></PhoneNumber></PhoneNumbers> (it would be perfect if it can stop here)
<PhoneNumber><number></number><type></type></PhoneNumber> (duplicates)
<number></number><type></type> (duplicates)



What's wrong w/ the recursion?

No comments:

Post a Comment