javascript - How can I recursively display an XML listing as a previous ASP:MENU did? -

i trying convert previous asp:menu item javascript. javascript code have written:

    function getmainmenu() {         var html = '';         var finalhtml = '';         finalhtml += '<div class="dropdown" style="width:100%">';         finalhtml += '<ul class="nav navbar-nav navbar-left">';         finalhtml += '<li class="dropdown">';         finalhtml += '<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" style="height:18px;color:#003366">';         finalhtml += 'main menu<span class="caret"></span></a>';          var mainmenu = null;         mainmenu = new activexobject("microsoft.xmldom");         mainmenu = readxml("/public/fhsmenu.xml");           finalhtml += buildlist(mainmenu.getelementsbytagname("menu"));           finalhtml += '</li>';         finalhtml += '</ul>';         finalhtml += '</div>';          alert(finalhtml);         document.getelementbyid("premainmenu").innerhtml = finalhtml;          var x = null;         x = new activexobject("microsoft.xmldom");         var item;           function buildlist(data) {             html += '<ul class="dropdown-menu" role="menu">';              x = data;              (item = 0; item < x.length ; item++) {                  var y = x[item].getelementsbytagname("title")[0].childnodes[0].nodevalue;                  var u = null;                 try {                     u = x[item].getelementsbytagname("url")[0].childnodes[0].nodevalue;                 } catch (e) {                     u = '';                 }                  if (u != '') {                     html += '<li><a href="' + u + '" style="font-size:12px;color:#003366" >' + y + '</a></li>';                 } else {                     html += '<li class="dropdown-submenu" role="menu" >';                     html += '<a href="#" data-toggle="dropdown" style="font-size:12px;color:#003366" >' + y + '</a>';                     html += '</li>';                     //var submenu = x[item].getelementsbytagname("menu");                     //if (submenu != undefined && submenu.length > 0) {                     //    html += buildlist(submenu); // submenu found. calling recursively same method (and wrapping in div)                     //}                 }              }              html += '</ul>';             return html;         }      } 

the xml file written use asp:menu , still being used legacy web applications need way recursively display menus in dropdown method user still see same drop down menu sub menus. far having trouble getting initial root menus displayed , calling same routine submenus root menu (if makes sense.) alert displaying items have "menu" in tag , not few root items.

<?xml version="1.0" standalone="yes"?> <leftnavmenu>   <menu>     <menuid>63</menuid>     <title>clinical care</title>     <url />     <zorder>0</zorder>     <menu>       <menuid>1660</menuid>       <parentid>63</parentid>       <title>ambulatory ehr</title>       <url>some_link</url>       <zorder>0</zorder>     </menu>     <menu>       <menuid>3649</menuid>       <parentid>63</parentid>       <title>angel eye</title>       <url>some_link</url>       <zorder>0</zorder>     </menu>     <menu>       <menuid>1610</menuid>       <parentid>63</parentid>       <title>clarity</title>       <url>some_link</url>       <zorder>0</zorder>     </menu>   </menu>   <menu>     <menuid>3</menuid>     <title>corporate</title>     <url />     <zorder>0</zorder>     <menu>       <menuid>1487</menuid>       <parentid>3</parentid>       <title>become organ donor</title>       <url>some_link</url>       <zorder>0</zorder>     </menu>     <menu>       <menuid>1845</menuid>       <parentid>3</parentid>       <title>brand style guide</title>       <url>some_link</url>       <zorder>0</zorder>     </menu>     <menu>       <menuid>2153</menuid>       <parentid>3</parentid>       <title>calendars</title>       <url />       <zorder>0</zorder>       <menu>         <menuid>2155</menuid>         <parentid>2153</parentid>         <title>freemanhealth.com events</title>         <url>some_link</url>         <zorder>0</zorder>       </menu>       <menu>         <menuid>2391</menuid>         <parentid>2153</parentid>         <title>kronos calendar</title>         <url>some_link</url>         <zorder>0</zorder>       </menu>       <menu>         <menuid>2158</menuid>         <parentid>2153</parentid>         <title>payroll</title>         <url>some_link</url>         <zorder>0</zorder>       </menu>       <menu>         <menuid>2156</menuid>         <parentid>2153</parentid>         <title>professional development</title>         <url>some_link</url>         <zorder>0</zorder>       </menu>       <menu>         <menuid>2157</menuid>         <parentid>2153</parentid>         <title>room scheduling</title>         <url>some_link</url>         <zorder>0</zorder>       </menu>     </menu>     <menu>       <menuid>8</menuid>       <parentid>3</parentid>       <title>car pool</title>       <url>some_link</url>       <zorder>0</zorder>     </menu>     <menu>       <menuid>1280</menuid>       <parentid>3</parentid>       <title>cmn (children's miracle network)</title>       <url>some_link</url>       <zorder>0</zorder>     </menu>     <menu>       <menuid>181</menuid>       <parentid>3</parentid>       <title>employee handbook</title>       <url>some_link</url>       <zorder>0</zorder>     </menu>   </menu> </leftnavmenu> 

i cobbled method recursively load xml menu file , though since didn't response , might useful else trying convert asp:menu javascript wanted show how accomplished. here code:

<script type="text/javascript">      function readxml(xmlfile) {         var xmldoc = new activexobject("microsoft.xmldom");         xmldoc = new activexobject("microsoft.xmldom");         xmldoc.async = "false";         xmldoc.load(xmlfile);         var tagobj = xmldoc.getelementsbytagname("menu");         var menuidvalue = tagobj[0].getelementsbytagname("menuid")[0].childnodes[0].nodevalue;         try {             var parentidvalue = tagobj[0].getelementsbytagname("parentid")[0].childnodes[0].nodevalue;         } catch (err) {             var parentidvalue = 0;         }         var titlevalue = tagobj[0].getelementsbytagname("title")[0].childnodes[0].nodevalue;          try {             var urlvalue = tagobj[0].getelementsbytagname("url")[0].childnodes[0].nodevalue;         } catch (err) {             var urlvalue = '';         }          var zordervalue = tagobj[0].getelementsbytagname("zorder")[0].childnodes[0].nodevalue;          return xmldoc     }       $(document).ready(function () {         getmainmenu();     });       function buildlist(data) {          var item;         var html = '';          html += '<ul class="dropdown-menu" role="menu">';          (item = 0; item < data.length ; item++) {              var title = data[item].getelementsbytagname("title")[0].childnodes[0].nodevalue;              var url = null;             try {                 url = data[item].getelementsbytagname("url")[0].childnodes[0].nodevalue;             } catch (e) {                 url = '';             }              if (url == '') {                 html += '<li class="dropdown-submenu" role="menu" >';                 html += '<a href="#" data-toggle="dropdown" style="font-size:12px;color:#003366" >' + title + '</a>';                 html += buildlist(data[item].getelementsbytagname("menu")); // submenu found. calling recursively same method                 html += '</li>';             } else {                 html += '<li><a href="' + url + '" style="font-size:12px;color:#003366" >' + title + '</a></li>';             }         }          html += '</ul>';         return html;     }       function getmainmenu() {         var html = '';         var finalhtml = '';         finalhtml += '<div class="dropdown" style="width:100%">';         finalhtml += '<ul class="nav navbar-nav navbar-left">';         finalhtml += '<li class="dropdown">';         finalhtml += '<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" style="height:18px;color:#003366">';         finalhtml += 'main menu<span class="caret"></span></a>';          var mainmenu = null;         mainmenu = new activexobject("microsoft.xmldom");         mainmenu = readxml("/public/fhsmenu.xml");          finalhtml += buildlist(mainmenu.childnodes[1].childnodes,html);           finalhtml += '</li>';         finalhtml += '</ul>';         finalhtml += '</div>';          document.getelementbyid("premainmenu").innerhtml = finalhtml;      }  </script>