2016-05-22 11 views
0

Ok so habe ich die folgende HTML-Datei:Laden von XML-Inhalten mit Ajax

<!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> 

Und die folgende XML-Datei mit Namen:

<?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> 

Und was ich will, ist irgendwie die Namen nehmen ab die XML-Datei und speichern sie in einem Array und dann drucken sie.Aber aus irgendeinem Grund ist nur der Vorname korrekt gespeichert ("Alex"). Ich verstehe nicht, was ich falsch gemacht habe. Kann mir jemand helfen? Ich wette, es ist etwas falsch mit den myFunction(xml) ist, aber ich kippe finden/fix it

+0

Verwenden Sie die Developer Tools in Ihrem Browser. Schau dir die Konsole an. Gibt es Fehler? Was passiert, wenn Sie 'console.log' Anweisungen hinzufügen? Läuft 'loadDoc' überhaupt? Läuft 'myFunction' überhaupt? Ist der Wert von 'xml' was Sie erwarten? Ist der Wert von x, was Sie erwarten? Ist der Wert von 'x [i] .getElementsByTagName (" Name ") [0] .childNodes [0] .nodeValue' was Sie erwarten? – Quentin

+0

ja ich habe versucht, aber kam leer ... –

+0

Was bedeutet das? Meinst du, es gab keine Fehler und einen der Werte, die Sie für eine Zeichenfolge mit Nulllänge getestet haben? – Quentin

Antwort

1

Sie müssen dies überprüfen:

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>

2

Es gibt nur eine Names Tag so Ihre Schleife nur einmal ausgeführt wird.
Ich würde stattdessen über die Name Tags Schleife.

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