Converting nested xml to nested html recursively

Question

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.

One small error is that you're wrapping a jquery object within another jquery object needlessly. Here are my suggested changes: jsfiddle.net/b2eMe/31. Basically, either pass 'root' to createNestedTree or use obj directly within the function. In my link, I changed it to $obj to indicate it's a jquery object, but that's just my personal preference. — Radu
– Radu, Commented Jul 10, 2012 at 15:33
Also, can you please post a sample of your expected results? — Radu
– Radu, Commented Jul 10, 2012 at 15:34

Yoshi · Accepted Answer · 2012-07-10 15:45:27Z

1

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/

edited Jul 10, 2012 at 15:45

answered Jul 10, 2012 at 15:39

Yoshi

54.8k14 gold badges93 silver badges108 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

xcopy · Accepted Answer · 2012-07-10 15:41:59Z

1

Please take a look at the following fiddle which solves your problem - http://jsfiddle.net/b2eMe/36/

CODE

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

        function createNestedTree(obj) {
            str += '<ul>'; 
            var children = obj.children();        
            if(children.size() != 0) {
                $.each(children, function (index, value) {
                    var $value = $(value);
                    str += '<li>' + $value.attr('name');
                    createNestedTree($value);
                    str += '</li>';
                })
            }
            str += '</ul>';     
        }
    </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>

answered Jul 10, 2012 at 15:41

xcopy

2,26019 silver badges24 bronze badges

1 Comment

Ashwin Over a year ago

+1 as your solution works. But I need a function to return the final html as in case of @Yoshi so I accept his answer.

Collectives™ on Stack Overflow

Converting nested xml to nested html recursively

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related