create an unordered list with jquery using xml

Question

I have an xml file which i want to convert to an unordered list using jquery. so far I managed to get the list working, except for the third level of the xml. Currently my code writes all child items of 'Navigation_sub_3'. What I'm trying to figure out is how to write only the child nodes that are in level_2, so the output would be

Strategy
  Views
     IBM
     etc.

UML
  Development
    Architecure
    etc

Platform
  Model
    BPEL
    OSLO
    etc
  Service
    Google
    Live
    etc.

Below is my html/jquery file and the xml. Can anyone help me out how to display the 3rd level?

Cheers Chris

test.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>

    <script src="js/jquery-1.2.6.js" type="text/javascript"></script>

    <script type="text/javascript">
        function XmlOnLoad(xmlData, strStatus)
        {
            var jData = $(xmlData);
            var jccNav = jData.find("Navigation");
            var jSections = jccNav.children();
            var jList = $("#Navi");

            jSections.each(function(intSectionIndex)
            {
                var jSection = $(this);
                var jTerm = $("<li></li>");
                var jDef2 = $("<ul></ul>");
                var jLevel2 = $("<b></b>");
                var jLevel3 = $("<b></b>");

                jSection.children().children().each(function(intPartIndex)
                {
                    var jPart3 = $(this);
                    var jText3 = $("<li></li>");

                    // Set the li text.
                    jText3.html("<a>" + jPart3.attr("tooltip") + "3.level</a>");

                    // Append to list.
                    jLevel3.append(jText3);
                });

                jSection.children().each(function(intPartIndex)
                {
                    var jPart2 = $(this);
                    var jText2 = $("<li></li>");

                    // Set the li text.
                    jText2.html("<a>" + jPart2.attr("tooltip") + " 2.level </a><ul>" + jLevel3.html());

                    // Append to list.
                    jLevel2.append(jText2);

                });

                jTerm.html("<a>"
                            + $(this).attr("tooltip")
                            + "1.ebene</a>"
                            + "<ul>"
                            + jLevel2.html()
                             );

                jList.append(jTerm);

                $("#homer").html(jList.html());
            });
        };

        $(document).ready(function()
        {
            $.get("content.xml", {}, XmlOnLoad);


        });
    </script>



</head>
<body>
<div id="homer"></div>


</body>
</html>

Content.xml

<?xml version="1.0" encoding="utf-8"?>
<Navigation>
    <Navigation_sub_1 tooltip="Strategy">
        <!--1 Button-->
        <level_2 name="Nav1" number="5" tooltip="Views">
            <level_3 name="Nav1_5" number="15" tooltip="IBM" />
            <level_3 name="Nav1_5" number="13" tooltip="Mainframe" />
            <level_3 name="Nav1_5" number="7" tooltip="Novell"     />
            <level_3 name="Nav1_5" number="6" tooltip="Open- Source"/>
            <level_3 name="Nav1_5" number="1" tooltip="Oracle"      />
            <level_3 name="Nav1_5" number="9" tooltip="SAP"         />
            <level_3 name="Nav1_5" number="8" tooltip="Sun"         />
        </level_2>
    </Navigation_sub_1>
    <!--2 Button-->
    <Navigation_sub_2 tooltip="UML">
        <level_2 name="Nav2" number="5" tooltip="Development">
            <level_3 name="Nav2_5" number="10" tooltip="Architecture"/>
            <level_3 name="Nav2_5" number="6" tooltip="Patterns"     />
            <level_3 name="Nav2_5" number="1" tooltip="SOA"          />
        </level_2>
    </Navigation_sub_2 >
    <!--3 Button-->
    <Navigation_sub_3 tooltip="Platform">
        <level_2 name="Nav3" number="1" tooltip="Model">
            <level_3 name="Nav3_1" number="15" tooltip="BPEL" />
            <level_3 name="Nav3_1" number="9" tooltip="BPMN"  />
            <level_3 name="Nav3_1" number="7" tooltip="DSL"   />
            <level_3 name="Nav3_1" number="10" tooltip="Oslo" />
            <level_3 name="Nav3_1" number="1" tooltip="UML"   />
        </level_2>
        <level_2 name="Nav3" number="7" tooltip="Service" >
            <level_3 name="Nav3_7" number="3" tooltip="Azure Services" />
            <level_3 name="Nav3_7" number="11" tooltip="ISB"           />
            <level_3 name="Nav3_7" number="6" tooltip="Live"           />
            <level_3 name="Nav3_7" number="8" tooltip="Live Mesh"      />
            <level_3 name="Nav3_7" number="13" tooltip="REST"          />
            <level_3 name="Nav3_7" number="9" tooltip="Web- services"  />
            <level_3 name="Nav3_7" number="1" tooltip="Windows Azure"  />
        </level_2>
    </Navigation_sub_3>


</Navigation>

Keltex · Accepted Answer · 2009-05-19 13:26:38Z

1

Have you tried to use some recursion? You could write a javascript function called writeSection. This function would write each node in a section and then if a node has children, it would call itself to write those children.

answered May 19, 2009 at 13:26

Keltex

26.5k12 gold badges83 silver badges112 bronze badges

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

1 Comment

Chris Over a year ago

Hi Keltex, thanks for the suggestion, I got it working with another for each loop within the level two section.. Cheers, Chris

Collectives™ on Stack Overflow

create an unordered list with jquery using xml

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related