Get started for free
Visual Studio Developer Center >
> 
> 
Help with parsing xml with javascript

Answered Help with parsing xml with javascript

  • Monday, February 20, 2012 3:00 AM
     
      Has Code
    Sign In to Vote
    0
     
    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>

     

All Replies

  • Monday, February 20, 2012 3:42 PM
     
     Answered Has Code
    Sign In to Vote
    0

    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 11:46 PM
     
     
    Sign In to Vote
    0

    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?

     
  • Tuesday, February 21, 2012 5:44 AM
    Moderator
     
     Answered Has Code
    Sign In to Vote
    0

    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