need help in parsing this XML code with raw javascript

Question

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;

guest · Accepted Answer · 2014-05-22 20:32:31Z

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.

answered May 22, 2014 at 20:32

guest

6,75833 silver badges48 bronze badges

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

4 Comments

ericsicons Over a year ago

your suggestion worked but there is something strange. for example alert(getEBTN('title')[0].childNodes[0].nodeValue); works and returns the title of the playlist but nodeValue does not work in the loop why is that

ericsicons Over a year ago

ok I think I found out the answer in stackoverflow.com/questions/12718945/… one of the video child elements had no data in it e.g <id></id> and you can not use nodeValue on empty elements

guest Over a year ago

getEBTN('title')[0] is <title>Yanni Covers</title>. Its childNodes[0] is the text node Yanni Covers, which does have a nodeValue

guest Over a year ago

I think the answer you linked to was referring to the fact that there is no .childNodes[0], because an empty element has no child nodes.

Gauss156 · Accepted Answer · 2014-05-22 20:18:25Z

0

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

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

answered May 22, 2014 at 20:18

Gauss156

863 bronze badges

Collectives™ on Stack Overflow

need help in parsing this XML code with raw javascript

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related