Aggelos Sfakianos Aggelos Sfakianos - 6 months ago 17
Ajax Question

Loading xml content with ajax

Ok so i have the following html file:

<!DOCTYPE html>
<html>
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
th,
td {
padding: 5px;
}
</style>

<body>

<button type="button" onclick="loadDoc()">Get the names</button>
<br>
<br>
<table id="demo"></table>

<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
myFunction(xhttp);
}
};
xhttp.open("GET", "names.xml", true);
xhttp.send();
}

function myFunction(xml) {
var i;
var xmlDoc = xml.responseXML;
var table = "<tr><th>Names</th></tr>";
var x = xmlDoc.getElementsByTagName("Names");
for (i = 0; i < x.length; i++) {
table += "<tr><td>" +
x[i].getElementsByTagName("Name")[0].childNodes[0].nodeValue;
}
document.getElementById("demo").innerHTML = table;
}
</script>

</body>

</html>


And the following xml file containing names:

<?xml version="1.0" encoding="UTF-8" ?>
<Names>
<Name>Alex</Name>
<Name>Anna</Name>
<Name>Eva</Name>
<Name>George</Name>
<Name>Jason</Name>
<Name>John</Name>
<Name>Lisa</Name>
<Name>Mary</Name>
<Name>Michael</Name>
<Name>Nick</Name>
<Name>Vicky</Name>
</Names>


And what i want is to somehow take the names from the xml file and store them inside an array and then print them.But for some reason only the first name is stored correctly("Alex").I dont understand what i have done wrong.Can somebody help me? I bet there is something wrong with the
myFunction(xml)
but i cant find/fix it

Answer

You need to check this:

var x = xmlDoc.getElementsByTagName("Names"); // Get the Names node.
var data = x[0].getElementsByTagName("Name"); // Get the Name node.

(function() {

  function myFunction(xml) {
    var i;
    var xmlDoc = (new window.DOMParser()).parseFromString(xml, "text/xml");
    var table = "<tr><th>Names</th></tr>";
    var x = xmlDoc.getElementsByTagName("Names");

    var data = x[0].getElementsByTagName("Name");

    for (i = 0; i < data.length; i++) {
      table += "<tr><td>" + data[i].childNodes[0].nodeValue + "</td></tr>";
    }
    document.getElementById("demo").innerHTML = table;
  }

  var xml = "<?xml version=\"1.0\" encoding=\"UTF-8\" ?><Names>  <Name>Alex</Name>  <Name>Anna</Name>  <Name>Eva</Name>  <Name>George</Name>  <Name>Jason</Name>  <Name>John</Name>  <Name>Lisa</Name>  <Name>Mary</Name>  <Name>Michael</Name>  <Name>Nick</Name>  <Name>Vicky</Name></Names>";
  myFunction(xml);


})();
<table id="demo"></table>