1
Answer

How to pass XML data to Menu

Photo of Thamsanqa Ngcongwane

Thamsanqa Ngcongwane
6y
539
1
This is my HTML 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="CSS/MainStyle.css">  
  5. </head>  
  6. <body>  
  7. <div class="row"> <div class="left" style="background-color:#000000;"> <h2 style="color:white">Admin</h2> <i class="fa fa-search"></i> <input type="text" id="mySearch" onkeyup="myFunction()" class="" placeholder="Search" title="Type in a category"> <hr> <ul id="myMenu"> <li><a href="#"><i class="fa fa-fw fa-user"></i></a></li> </ul> </div> </div>  
  8. </body> </html>  
  9. The following my Javascript  
  10. if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari  
  11. xmlhttp = new XMLHttpRequest(); } else  
  12. {// code for IE6, IE5  
  13. xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); }  
  14. xmlhttp.open("GET", "Data/Records.xml", false);  
  15. xmlhttp.send(null);  
  16. xmlDoc = xmlhttp.responseXML;  
  17. document.write("<ul id='myMenu'>");  
  18. var x = xmlDoc.getElementsByTagName("record");  
  19. for (i = 0; i < x.length; i++) {  
  20. document.write("<li><a href='" +"<i class='fa fa-fw fa-user'>" + x[i].getElementsByTagName("role")[0] .childNodes[0].nodeValue + x[i].getElementsByTagName("department")[0] .childNodes[0].nodeValue + "</a></li>") ; } document.write("</ul>");  
now my dta appears like this

Answers (1)

Next Recommended Forum