nested xml into unordered list in jquery

Question

I am trying to convert a nested xml document to an unordered list using jquery.The xml document is

    <?xml version="1.0" encoding="utf-8"?>
    <Parent>
    <name>Director</name>
    <Children>Exe Director1</Children>
    <Children>Exe Director2</Children>
    <Parent>
        <name>Exe Director3</name>
        <Children>Sub Director 1</Children>
        <Children>Sub Director 2</Children>
        <Parent>
            <name>Sub Director 3</name>
            <Children>Cameraman 1</Children>
            <Children>Cameraman 2</Children>
        </Parent>
    </Parent>    
</Parent>

The expected output:

 <ul>
    <li>Director
        <ul>
            <li>Exe Director 1</li>
            <li>Exe Director 2</li>
            <li>Exe Director 3
                <ul>
                    <li>Sub Director 1</li>
                    <li>Sub Director 2</li>
                    <li>Sub Director 3
                        <ul>
                            <li>Cameraman 1</li>
                            <li>Cameraman 2</li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

The output which I am getting.

 <ul>
        <li>Director</li>
        <ul>
            <li>Exe Director1</li>
            <li>Exe Director2</li>
            <li>Exe Director3</li>
            <ul>
                <li>Sub Director 1</li>
                <li>Sub Director 2</li>
                <li>Sub Director 3</li>
                <ul>
                    <li>Cameraman 1</li>
                    <li>Cameraman 2</li>
                </ul>
            </ul>
        </ul>
    </ul>

As you can see,the Children are not getting created inside the parent li but outside it The latest version of the code

    <!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) { 
                var $ul = xmlParser(xml, $('#ListContainer'));
            }
        });
    });

    function xmlParser(xml,ul) {
        $(xml).contents().each(function (i, el) 
        {
            if (el.nodeName.toUpperCase() == "CHILDREN") 
            {
               $("<li>").text($(el).text()).appendTo($('ul:last')); // Append <li> Children
            } else if (el.nodeName.toUpperCase() == "NAME") 
            {
                $('<li>').text($(el).text()).appendTo(ul);
                $('<ul>').insertAfter($("li:last"));
            }
            else if (el.nodeName.toUpperCase() == "PARENT") 
            {
               if($('ul').length == 0)
                {
                    ul = ul.append('<ul>');
                }
                ul.append(xmlParser($(el),$("ul:last") )); // Recursively append the other Parent
            }
        });
        return ul;
    }
</script>
</head>
<body>
    <div id="ListContainer"></div>
</body>
</html>

I am breaking my head over this code.Can you guys help me out with what might be going wrong!

Thanks

@rt2800 Do I need to place a check when the xml is emptied , call a function from there and write the append code in that function — Harsha Venkataramu
– Harsha Venkataramu, Commented Oct 3, 2012 at 8:47
create <UL> outside xmlParser() method and pass it as parentElem. e.g. var $ul = xmlParser(xml, $('<ul>')); $("#ListContainer").append($ul) in success callback of $.ajax. Return $ul as output result of xmlParser() function — rt2800
– rt2800, Commented Oct 3, 2012 at 9:25
If you could post your comment as an answer,I could give the "accept"! — Harsha Venkataramu
– Harsha Venkataramu, Commented Oct 3, 2012 at 10:25

YogeshWaran · Accepted Answer · 2012-10-03 08:52:30Z

1

You are appending PARENT element to same "ul" element for all "PARENT" contents. use

 $ul.find('li').last().append(xmlParser($(el)));

instead of

 $ul.append(xmlParser($(el)));

refer below link for last api:

http://api.jquery.com/last/

answered Oct 3, 2012 at 8:52

YogeshWaran

2,2894 gold badges24 silver badges32 bronze badges

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

1 Comment

Harsha Venkataramu Over a year ago

tried that.Still gives the same result.Also,how can I move $("#ListContainer").append($ul); out of recursion

Henrik Aasted Sørensen · Accepted Answer · 2012-10-04 07:01:32Z

1

My suggestion is to use jQuery's map function recursively, as in the following example:

<script type="text/javascript">
$(function() {
    var map = function() {
            if ($(this).is("parent")) {
                var children = $(this).children().map(map).get().join('');
                $(this).children().remove();
                var result = "<li>" + $(this).text();
                return result + "<ul>" + children + "</ul></li>";
            }

            if ($(this).is("Children")) {
                return "<li>" + $(this).text() + "</li>";
            }
        };

    $.get("test.xml", function(data) {
        var result = $(data).map(map);
        $("div").html("<ul>" + result[0] + "</ul>");
    }, "html");
}); 
</script>

This ensures that the input tree is traversed completely, and that the resulting output has the same "indentations" as the input.

Notice that map() returns an array, so the resulting string is present as the first item of the array.

edited Oct 4, 2012 at 7:01

answered Oct 3, 2012 at 14:58

Henrik Aasted Sørensen

7,19611 gold badges55 silver badges66 bronze badges

3 Comments

Harsha Venkataramu Over a year ago

This removes the parent names from the list and prints only the child nodes? Please take a look at the xml code,the expected output and the generated output.

Henrik Aasted Sørensen Over a year ago

Apologies. I amended the code, which should create the desired structure now.

Harsha Venkataramu Over a year ago

The list is generated just fine,the only issue being that the parent's name is not coming inside the list!

rt2800 · Accepted Answer · 2012-10-04 07:26:07Z

1

Here is Consolidation of my comments into a coherent answer-->

move $("#ListContainer").append($ul); out of recursion;
create <UL> outside xmlParser() method and pass it as parentElem. e.g. var $ul = xmlParser(xml, $('<ul>')); $("#ListContainer").append($ul) (in success callback of $.ajax)
Return $ul as output result of xmlParser() function

answered Oct 4, 2012 at 7:26

rt2800

3,0552 gold badges23 silver badges26 bronze badges

1 Comment

Harsha Venkataramu Over a year ago

Thanks for your help rt2800. Unfortunately , SO doesn't allow a user to accept more than one answer.Thanks again!

Anujith · Accepted Answer · 2013-04-29 13:28:20Z

0

You are appending PARENT element to same "ul" element for all "PARENT" contents. use

$ul.find('li').last().append(xmlParser($(el)));

instead of

$ul.append(xmlParser($(el)));

edited Apr 29, 2013 at 13:28

Anujith

9,3686 gold badges36 silver badges48 bronze badges

answered Feb 23, 2013 at 10:34

jsexpert

524 bronze badges

Collectives™ on Stack Overflow

nested xml into unordered list in jquery

4 Answers 4

1 Comment

3 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related