CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Ashwin
Ashwin

Reputation: 12421

Creating html ul li from nested xml element using jquery

I have an xml as -

<item name="a">
   <item name="d">
      <item name="g">
          ...
      </item>
      ...
   </item>
   <item name="e"></item>
   <item name="f"></item>
   ...
</item>
<item name="b"></item>
<item name="c"></item>

I want to create a ul li tree structure of this xml as

a [node]
 d [node]
  g [node]
  .
  .
  .
 e [node]
 f [node]
 .
 .
b [node]
c [node]

I guess I would need to make a infinte loop, but finding it difficult to do it in jquery. My jquery would resemble somewhat like this -

function createNestedTree(obj) {
  $("#tree").append("<ul></ul>");
  $(obj).children("item").each(function(){
    $("#tree ul").append("<li>"+$(this).attr("name")+"</li><ul id="+$(this).attr("name")+"level></ul>");
    $(this).children("item").each(function(){
       //logic here
    });
  });
}

Any help is greatly appreciated.

Upvotes: 0

Views: 1290

Answers (1)

Ricola3D
Ricola3D

Reputation: 2442

Does this work for you ?

 function jumpdown (obj) {
   if (obj.hasChildNodes()) {
     var nextlevel = "<li>"+$(obj).attr("name")+"</li><ul id='"+$(obj).attr("name")+"level'>";
     for (var i=0 ; i<obj.chilNodes.length, i++)
     {
       nextlevel = nextlevel + jumpdown(obj.chilNodes[i]);
     }
     nextlevel = nextlevel + "</ul>";
     return nextlevel;
   }
   else return "<li>"+$(obj).attr("name")+"</li>";
 }

 jumpdown(mydocumentxml);

Upvotes: 1

Related Questions