Home/ Questions/Q 8792759
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T23:01:33+00:00

I am new to Stack OverFlow and coding in general. I am trying to

  • 0

I am new to Stack OverFlow and coding in general. I am trying to take an XML file and render it in the browser using JavaScript. I have looked around at some sample code of how to do this and came up with the following code:

<!DOCTYPE html>
<html>
<body>

<script>
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.open("GET","social.xml",false);
  xmlhttp.send();
  xmlDoc=xmlhttp.responseXML; 

document.write("<table border='1'>");
var x=xmlDoc.getElementsByTagName("CD");
for (i=0;i<x.length;i++)
  { 
  document.write("<tr><td>");
  document.write(x[i].getElementsByTagName("c_id")[0].childNodes[0].nodeValue);
  document.write("</td><td>");
  document.write(x[i].getElementsByTagName("facebook_id")[0].childNodes[0].nodeValue);
  document.write("</td></tr>");
  }
  document.write("</table>");
</script>

</body>
</html>

Anyway, when I run this on my local server none of the data that I am trying to display in the table appears. My .html file and .xml file are in the same folder, so I believe I have the correct file pathway. I could just be making a rookie mistake here, but I can’t for the life of me figure out why a table listing the c_id and facebook_id values is not being created. I looked around for answers and haven’t been able to find any. Any help would be greatly appreciated. Thanks!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You need to add an onload event listener to the xmlhttprequest before sending the request. Also, you might need to parse the XML with a DOMParser. Anyway, this should work on modern browsers:

    <!DOCTYPE html>
<html>
    <body>

        <script>
            if (window.XMLHttpRequest)
            {// code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp=new XMLHttpRequest();
            }
            else
            {// code for IE6, IE5
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }



            xmlhttp.onload = function() {
                var xmlDoc = new DOMParser().parseFromString(xmlhttp.responseText,'text/xml');

                console.log(xmlDoc);

                document.write("<table border='1'>");
                var x=xmlDoc.getElementsByTagName("CD");
                for (i=0;i<x.length;i++)
                { 
                    document.write("<tr><td>");
                    document.write(x[i].getElementsByTagName("c_id")[0].childNodes[0].nodeValue);
                    document.write("</td><td>");
                    document.write(x[i].getElementsByTagName("facebook_id")[0].childNodes[0].nodeValue);
                    document.write("</td></tr>");
                }
                document.write("</table>");

            }


            xmlhttp.open("GET","social.xml",false);
            xmlhttp.send();
            </script>

    </body>
</html>

    Now, just a couple of things worth mentioning about what you’re doing:

    • xmlhttprequest objects have many different parameters that mean a variety of things: readystate, status code, the works. You might benefit looking a bit more into those.

    • document.write should really never be used, ever. In fact, any means of HTML injection should be handled very carefully. You could use a template-based solution common in many MVC-esque frameworks, or mine if you want 🙂

    • 0