Loading xml content with ajax

Question

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

Use the Developer Tools in your browser. Look at the Console. Are there any errors? What if you add console.log statements? Does loadDoc run at all? Does myFunction run at all? Is the value of xml what you expect? Is the value of x what you expect? Is the value of x[i].getElementsByTagName("Name")[0].childNodes[0].nodeValue what you expect? — Quentin
– Quentin, Commented May 22, 2016 at 18:28
What does that mean? Do you mean there were no errors and one of the values you tested for a zero length string? — Quentin
– Quentin, Commented May 22, 2016 at 18:38
OK, so there weren't any errors. What did you get when you added console.log statements at all of the points I suggested adding them at? — Quentin
– Quentin, Commented May 22, 2016 at 18:48

Musa · Accepted Answer · 2016-05-22 18:57:10Z

2

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;
}

answered May 22, 2016 at 18:57

Musa

97.9k17 gold badges123 silver badges144 bronze badges

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

Comments

Danny Fardy Jhonston Bermúdez · Accepted Answer · 2016-05-22 18:57:12Z

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>

Collectives™ on Stack Overflow

Loading xml content with ajax

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related