need help in parsing this XML code with raw javascript

问题

The XML structure is as follows and I am trying to output the data into an HTML table but the inner loop is just returning null instead of the text inside the Elements, I commented the part where I am having the issue in the JavaScript.

<playlist>
   <id>PLnqdTIS_B64I7zbB_tPgvHiFTnmIqpT0u</id>
   <title>Yanni Covers</title>
   <numVideos>23</numVideos>
   <video>
      <id>Kg42VjNo0Pw</id>
      <title>Yanni - Before I Go Piano Cover</title>
      <duration>4:33</duration>
      <thumbnail>http://i1.ytimg.com/vi/Kg42VjNo0Pw/1.jpg</thumbnail>
      <datePublished>2014-04-29</datePublished>
      <views>156</views>
      <favorites>0</favorites>
      <numRated>3</numRated>
      <author>migoicons</author>
   </video>
   <video>
      <id>CKtH0H416Zg</id>
      <title>Yanni - Face In The Photograph</title>
      <duration>4:20</duration>
      <thumbnail>http://i1.ytimg.com/vi/CKtH0H416Zg/1.jpg</thumbnail>
      <datePublished>2014-03-27</datePublished>
      <views>562</views>
      <favorites>0</favorites>
      <numRated>13</numRated>
      <author>migoicons</author>
   </video>
</playlist>

The JavaScript

var playlist = "";

function loadXML() {
    var xmlhttp;
    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    } else {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            playlist = xmlhttp.responseXML;
            var html = "";
            html += "<b>Playlist ID : </b>" + getNodeVal('id') + "<br />";
            html += "<b>Playlist Title : </b>" + getNodeVal('title') + "<br />";
            html += "<b>Playlist Description : </b>" + getNodeVal('description') + "<br />";
            html += "<b>Playlist Videos : </b>" + getNodeVal('numVideos') + "<br />";
            html += "<br /><strong>List of videos</strong> <br /><br />";

            html += "<table><tr>\n\
                    <th>Index</th>";

            for (var x = 0; x < getEBTN('video')[0].childNodes.length; x++) {

                html += "<th>" +
                  getEBTN('video')[0].childNodes[x].tagName + " </th>";
            }
            html += "</tr>";
            for (var a = 0; a < getEBTN('video').length; a++) {
                html += "<tr><td>" + a + "</td>";

                for (var y = 0; y < getEBTN('video')[0].childNodes.length; y++) {
                    /* can't get this part to work just getting null instead of text*/

                   html += "<td>" + getEBTN('video')[a].childNodes[y].nodeValue + "</td>";         

                }
                html += "</tr>";

            }
            html += "</table>";
            document.getElementById("myDiv").innerHTML = html;
        }
    }
    xmlhttp.open("GET", "xml_server.php?id=nqdTIS_B64I7zbB_tPgvHiFTnmIqpT0u", true);
    xmlhttp.send();
}

function getEBTN(tagName) {
    return playlist.getElementsByTagName(tagName);
}

function getNodeVal(tagName) {
    return getEBTN(tagName)[0].childNodes[0].nodeValue;
}
window.onload = loadXML;

回答1:

Let me just work through this:

getEBTN('video') is a node list of the video elements

getEBTN('video')[a] is one of those video elements

getEBTN('video')[a].childNodes is a node list of the child elements

getEBTN('video')[a].childNodes[y] is one child element, such as <id>Kg42VjNo0Pw</id>

That said, elements don't have a nodeValue (source).

Maybe you wanted getEBTN('video')[a].childNodes[y].textContent.

回答2:

Trying to parse XML in JavaScript is a special level of hell.

Try X2JS: https://code.google.com/p/x2js/

来源：https://stackoverflow.com/questions/23816032/need-help-in-parsing-this-xml-code-with-raw-javascript

标签

javascript

ajax

xml-parsing