CODEWITHSUNDEEP
javascripthtmlajaxxml
Aggelos Sfakianos
Aggelos Sfakianos

Reputation: 157

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

Upvotes: 0

Views: 49

Answers (2)

Danny Fardy Jhonston Berm&#250;dez
Danny Fardy Jhonston Berm&#250;dez

Reputation: 5571

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>

Upvotes: 1

Musa
Musa

Reputation: 97717

There is only one Names tag so your loop will only execute once.
I would loop over the Name tags instead.

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

Upvotes: 2

Related Questions