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
2 answers
solution1
2 2016-05-22 18:57:10
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;
}
solution2
1 ACCPTED 2016-05-22 18:57:12
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.