none
Help with parsing xml with javascript

    Question

  • Hello all, I am new to javascript and especially incorporating xml into javascript. Any help pointing me in the right direction will be

    much appreciated

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Contact Information</title> <script type="text/javascript"> var xmlDoc; function loadTheXML() { xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); xmlDoc.async = false; xmlDoc.onreadystatechange = readTheXML; xmlDoc.load("contactinfo.xml"); } function readTheXML() { if (xmlDoc.readyState == 4) { var list = document.getElementById("list"); var chapters = xml.getElementsByTagName("item"); for (var i=0; i<chapters.length; i++) { var listItem = document.createElement("li"); var listItemText = document.createTextNode( chapters[i].getAttribute("servicephone") + ": " + chapters[i].getAttribute("email")); listItem.appendChild(listItemText); list.appendChild(listItem); window.alert("This works!!") //Put a alert to see if this blokc is executed when the //above condition is satisfied. } </script> </head> <body> <p><input type="button" value="Click here" onclick="loadTheXML();"></p> </body> </html>

    //Here is my .xml file (contactinfo.xml)

    <?xml version="1.0" encoding="utf-8" ?>
    <Contacts>
      <item servicephone="(800) 500-0066" 
            email="customerservice@fsig.com" 
            url="http://www.fsig.com" 
            address="5000 Barcilona Beach Rd. Wilmington, NC 28000">
      </item>
    </Contacts>
    


    Monday, February 20, 2012 3:00 AM

Answers

  • Hey

    You forgot to include and element with the id list that might be why it's not working.

    Personally I'd recommend to use jQuery it is much easier to use for tasks like this and you avoid a lot of cross-browser issues. Here would be the code to do that:

        <script type="text/javascript">
            $(document).ready(function () {
                $.ajax({
                    type: "GET",
                    url: "contactinfo.xml",
                    dataType: "xml",
                    success: function (xml) {
                        $(xml).find('item').each(function () {
                            var listItemText = $(this).attr('servicephone') + ': ' + $(this).attr('email');
                            var listItem = $('<li></li>').html(listItemText);
                            listItem.appendTo('#list');
                        });
                    }
                });
            });
        </script>

    Do not forget to include the jquery javascript file.

    Cheers

    Nik

    Monday, February 20, 2012 3:42 PM
  • I have to ask what jquery javascript file are you refering to?

    That is the jQuery framework library, you can download a latest version here in the jQuery official site: http://jquery.com/.
    Import the library into your page with the following line:
    <script src="jquery-1.7.1.min.js" type="text/javascript"></script>

    I want to load the .xml file onload, so would I be right to put an body.onload and call for the function?

    Nope, the parts written in 
     $(document).ready(function () {
                
     });
    will execute automatically.
    http://docs.jquery.com/Tutorials:Introducing_%24%28document%29.ready%28%29.

    Have a nice day,

    Leo Liu [MSFT]
    MSDN Community Support | Feedback to us

    Tuesday, February 21, 2012 5:44 AM

All replies

  • Hey

    You forgot to include and element with the id list that might be why it's not working.

    Personally I'd recommend to use jQuery it is much easier to use for tasks like this and you avoid a lot of cross-browser issues. Here would be the code to do that:

        <script type="text/javascript">
            $(document).ready(function () {
                $.ajax({
                    type: "GET",
                    url: "contactinfo.xml",
                    dataType: "xml",
                    success: function (xml) {
                        $(xml).find('item').each(function () {
                            var listItemText = $(this).attr('servicephone') + ': ' + $(this).attr('email');
                            var listItem = $('<li></li>').html(listItemText);
                            listItem.appendTo('#list');
                        });
                    }
                });
            });
        </script>

    Do not forget to include the jquery javascript file.

    Cheers

    Nik

    Monday, February 20, 2012 3:42 PM
  • Thank you for the reply! Jquery definitely seems easier, but I am new to it so I have to ask what jquery javascript file are you refering to?

    I want to load the .xml file onload, so would I be right to put an body.onload and call for the function?

    Monday, February 20, 2012 11:46 PM
  • I have to ask what jquery javascript file are you refering to?

    That is the jQuery framework library, you can download a latest version here in the jQuery official site: http://jquery.com/.
    Import the library into your page with the following line:
    <script src="jquery-1.7.1.min.js" type="text/javascript"></script>

    I want to load the .xml file onload, so would I be right to put an body.onload and call for the function?

    Nope, the parts written in 
     $(document).ready(function () {
                
     });
    will execute automatically.
    http://docs.jquery.com/Tutorials:Introducing_%24%28document%29.ready%28%29.

    Have a nice day,

    Leo Liu [MSFT]
    MSDN Community Support | Feedback to us

    Tuesday, February 21, 2012 5:44 AM