How to fetch child node values from xml file using javascript

Question

I can fetch the <name> tag value from the XML below, but I can't fetch all of the <image><url> values:

<?xml version='1.0' encoding='ISO-8859-1'?>
<gallery>
  <name>abc</name>
  <email><![CDATA[smith@email.com]]></email>

  <images>
    <image>
      <url><![CDATA[g2pic3.jpg]]></url>
      <caption><![CDATA[Red Sun]]></caption>
    </image>
    <image>
      <url><![CDATA[g2pic4.jpg]]></url>
      <caption><![CDATA[Eiffel Tower]]></caption>
    </image>
  </images>

</gallery>

Here is my javascript code. I want to fetch all of the values included in the <images> tag, but am having trouble with this part.

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
        myFunction(xhttp);
    }
}
xhttp.open("GET", "template.xml", true);
xhttp.send();

function myFunction(xml) {
     var xmlDoc = xml.responseXML;
     nameList = xmlDoc.getElementsByTagName("name");

     var nameList = nameList[0].childNodes;

     document.getElementById("demo").innerHTML = xmlDoc.getElementsByTagName("name")[0].childNodes[0].nodeValue;

}


//xmlDoc.getElementsByTagName("gallery").item(0).firstChild.nodeValue;

</script>

</body>
</html>

Answer 1

Pretty sure there are much better solutions to this. My plain old js is a little rusty.

<!DOCTYPE html>
<html>
    <body>
        <p id="demo"></p>

        <script>
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function() {
                if (xhttp.readyState == 4 && xhttp.status == 200) {
                    myFunction(xhttp);
                }
            }
            xhttp.open("GET", "template.xml", true);
            xhttp.send();

            function myFunction(xml) {
                var xmlDoc = xml.responseXML;

                // Create a object gallery to store the values.
                var gallery = {};
                gallery.name = xmlDoc.getElementsByTagName("name")[0].childNodes[0].nodeValue;
                gallery.email = xmlDoc.getElementsByTagName("email")[0].childNodes[0].nodeValue;

                // Put all image elements into xmlImages
                var xmlImages = xmlDoc.getElementsByTagName("image");

                // Add an empty array to gallery
                gallery.image = [];

                // Iterate over all images in xmlImages
                for(var i = 0; i < xmlImages.length; i++) {

                    var xmlImage = xmlImages[i];

                    // Create an new object and add url and caption values to it                                    
                    var image = {};
                    image.url = xmlImage.getElementsByTagName("url")[0].childNodes[0].nodeValue;
                    image.caption = xmlImage.getElementsByTagName("caption")[0].childNodes[0].nodeValue;

                    // Add the image object to the gallery.image array
                    gallery.image.push(image);
                }

                // Quick and dirty, create a string with html tag to present the result
                var html = "name: " + gallery.name + "<br>" +
                       "email: " + gallery.email + "<br>" + 
                       "images:<br><ul>";

                for(var i = 0; i < gallery.image.length; i++) {
                    html += "<li>image" + i + ":<br>";
                    html += "<ul><li>url: " + gallery.image[i].url + "</li>";
                    html += "<li>caption: " + gallery.image[i].caption + "</li></ul>";
                }
                html += "</ul>";
                document.getElementById("demo").innerHTML = html;
            }
        </script>

    </body>
</html>

How to fetch child node values from xml file using javascript

Question

1 answers

solution1
0 ACCPTED 2015-10-22 22:37:26

How to fetch child node values from xml file using javascript

Question

1 answers

solution1 0 ACCPTED 2015-10-22 22:37:26

solution1
0 ACCPTED 2015-10-22 22:37:26