Question

-1

Using JavaScript to parse an XML file

rated 0 times [ 2] [ 3] / answers: 1 / hits: 51343 / 12 Years ago, fri, november 2, 2012, 12:00:00

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!

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

farrahsavannahl

Add To Favorites

Follow

Total Points: 418

Total Questions: 108

Total Answers: 90

Location: Bonaire

Member since Sat, May 1, 2021

3 Years ago

answered 12 Years ago jackelyn · Accepted Answer

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 :)