Home/ Questions/Q 8201049
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-07T06:40:14+00:00

I want to convert nested xml to nested ul li structure. I have written

  • 0

I want to convert nested xml to nested ul li structure. I have written all the code but there is a error in it. I have spent whole day but can’t getting it to work. The error can be very simple. Can anyone please look into that and reply to me.

<html>
<head>
    <script type="text/javascript">
        var str = ""; var temp = "";
        function makeTree() {
            treeUL = createNestedTree($('root'));
            $("#tree").append(treeUL);
        }

        function createNestedTree(obj) {
            if($(obj).children().size() != 0) {
                str = str + "<li>" + $(obj).attr("name") + "</li><ul>";
                $(obj).children("item").each(function() {
                    returnValue = createNestedTree($(this));
                    str = str + returnValue;
                });

                return str + "</ul>";
            }
            else {
                temp = "<li>" + $(obj).attr("name") + "</li><ul></ul>";
                return temp;
            }
        }
    </script>
</head>

<body>
    <!-- xml structure start -->
    <root>
        <item name="a">
            <item name="d">
                <item name="d"></item>
                <item name="e"></item>     
                <item name="f"></item>
            </item>
            <item name="g"></item>
            <item name="h"></item>
        </item>
        <item name="b"></item>
        <item name="c"></item>
    </root>
    <!-- xml structure end -->

    <a href="javascript:makeTree()">Make Tree</a>
    <div id="tree"></div>
</body>
</html>​

Fiddle is here

I have created xml inside html because I do not know how to refer external xml into fiddle. But it behaves exactly like xml when passed to the function so no issues about that.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    try:

    var makeTree = function makeTree(nodes) {
  var $result = $('<ul>');

  $.each(nodes, function (_, node) {
    var
      $li = $('<li>').text(node.getAttribute('name')).appendTo($result),
      $children = $(node).children('item');

    if ($children.length > 0) {
      makeTree($children).appendTo($li);
    }
  });

  return $result;
};

makeTree($('root').children('item')).appendTo('#tree');

    demo: http://jsfiddle.net/8zeep/2/

    • 0