在使用原始javascript解析此XML代码时需要帮助 [英] need help in parsing this XML code with raw javascript

问题描述

XML结构如下，我试图将数据输出到HTML表中，但是内部循环只是返回null而不是Elements内的文本，我评论了我在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>

JavaScript

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;

推荐答案

让我来解决一下这个问题:

Let me just work through this:

getEBTN('video')是视频元素的节点列表

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

getEBTN('video')[a] 是这些视频元素之一

getEBTN('video')[a] .childNodes 是子元素的节点列表

getEBTN('video')[a] .childNodes [y] 是一个子元素，例如< id> Kg42VjNo0Pw</id>

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

也就是说，元素没有 nodeValue (来源).

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

也许您想要 getEBTN('video')[a] .childNodes [y] .textContent .

这篇关于在使用原始javascript解析此XML代码时需要帮助的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！