Home > Articles > Web Services > XML

Sams Teach Yourself XML in 21 Days

Sep 16, 2005

📄 Contents

␡

⎙ Print

< Back Page 202 of 288 Next >

Recommended Book 

Sams Teach Yourself XML in 21 Days, 3rd Edition

Learn More Buy

Getting All XML Data from a Document

So that you can see how to work with all the XML data in an XML document at once, you'll take a look at an example that extracts and displays all the data in the XML sample document by using JavaScript. So far, you've only gone after one element or one attribute, but this example will extract and display all the data in the document. Among other things, this will let you handle general XML documents instead of targeting specific elements. This means you will not have to know the document structure before proceeding, and it will also let you determine node types on-the-fly.

In this example you'll use recursion, the technique that allows a method to call itself, to work through an entire document without knowing that document's structure. You'll write a JavaScript method named childLoop to do this; when you're at a node, all you will have to do is loop over all of its child nodes by calling childLoop on them. All you have to do is pass this method a node and an indentation string, and it will display the current node and all of its children, incrementing the indentation by four spaces for each successive generation to make the display onscreen look good. This means you can start by passing the root node to childLoop like this (this method, readXMLData, is called when the user clicks a button labeled Get All the Data in this example):

<HTML>
    <HEAD>
        <TITLE>
            Getting all XML data
        </TITLE>

        <SCRIPT LANGUAGE="JavaScript">

            function readXMLData()

               {

                   xmlDocumentObject = new ActiveXObject("Microsoft.XMLDOM")

                   xmlDocumentObject.load("ch15_01.xml")


                   displayDIV.innerHTML = childLoop(xmlDocumentObject, "")

               }
        .
        .
        .

Now you need to write the recursive method, childLoop. This method has a node and the current indentation (a string of spaces) passed to it, and the first order of business is to discover what kind of node you're dealing with. You can do that by using the node's nodeType property, like this:

function childLoop(currentNode, indentation)
{
    var typeName


       switch (currentNode.nodeType) {

           case 1:

               typeName = "Element"

               break

           case 2:

               typeName = "Attribute"

               break

           case 3:

               typeName = "Text"

               break

           case 4:

               typeName = "CDATA section"

               break

           case 5:

               typeName = "Entity reference"

               break

           case 6:

               typeName = "Entity"

               break

           case 7:

               typeName = "Processing instruction"

               break

           case 8:

               typeName = "Comment"

               break

           case 9:

               typeName = "Document"

               break

           case 10:

               typeName = "Document type"

               break

           case 11:

               typeName = "Document fragment"

               break

           case 12:

               typeName = "Notation"

       }
        
   .
        
   .
        .

Now you know the type of node and have stored the name of the type, such as "Attribute" or "Text", in the variable called typeName. You can display the type of the current node and its value, if it has a value, like this:

var text

if (currentNode.nodeValue != null) {

       text = indentation + "<b>" + typeName +

       "</b>: " + currentNode.nodeValue

   } else {

       text = indentation + "<b>" + typeName +

       "</b>: " + currentNode.nodeName

   }

That takes care of the node and its value, if it has any. If the node is an element, it can also have attributes, so you loop over them like this:

if (currentNode.attributes != null) {
    if (currentNode.attributes.length > 0) {
        for (var loopIndex = 0; loopIndex <
            currentNode.attributes.length; loopIndex++) {
            .
            .
            .
        }
    }
}

You can display each attribute and its value like this:

if (currentNode.attributes != null) {
    if (currentNode.attributes.length > 0) {
        for (var loopIndex = 0; loopIndex <
            currentNode.attributes.length; loopIndex++) {
            text += " <b>Attribute</b>: " +

                   currentNode.attributes(loopIndex).nodeName +

                   " = \"" +

                   currentNode.attributes(loopIndex).nodeValue

                   + "\""
        }
    }
}

You have completed the display of the current node. Now add a line break and check whether the current node has any children:

    text += "<BR>"

    if (currentNode.childNodes.length > 0) {

           .

           .

           .

       }

       return text
}

If the current node has any child nodes, you can loop over those child nodes by calling the childLoop method recursively, like this:

    text += "<BR>"

    if (currentNode.childNodes.length > 0) {
        for (var loopIndex = 0; loopIndex <

               currentNode.childNodes.length; loopIndex++) {

               text += childLoop(currentNode.childNodes(loopIndex),

               indentation + "&nbsp;&nbsp;&nbsp;&nbsp")

           }
    }
    return text
}

Note that here you're increasing the indentation by four spaces by using the HTML nonbreaking space entity,  . Otherwise, the browser would normalize multiple indentation spaces into a single space.

At the end of the childLoop method, the code returns the full HTML text to be displayed. The JavaScript in the readXMLData method, which is called when the button in this example is clicked, displays that text in the Web page by using a <DIV> element:

function readXMLData()
{
    xmlDocumentObject = new ActiveXObject("Microsoft.XMLDOM")
    xmlDocumentObject.load("ch15_01.xml")

    displayDIV.innerHTML = childLoop(xmlDocumentObject, "")
}

Listing 15.6 shows all the code for this example, as ch15_06.html. Note that you've added the code to display the button that the user can click, which calls the readXMLData method.

Example 15.6. Getting All XML Data from a Document (`ch15_06.html`)

<HTML>
    <HEAD>
        <TITLE>
            Getting all XML data
        </TITLE>

        <SCRIPT LANGUAGE="JavaScript">

            function readXMLData()
            {
                xmlDocumentObject = new ActiveXObject("Microsoft.XMLDOM")
                xmlDocumentObject.load("ch15_01.xml")

                displayDIV.innerHTML = childLoop(xmlDocumentObject, "")
            }

            function childLoop(currentNode, indentation)
            {
                var typeName

                switch (currentNode.nodeType)  {
                    case 1:
                        typeName = "Element"
                        break
                    case 2:
                        typeName = "Attribute"
                        break
                    case 3:
                        typeName = "Text"
                        break
                    case 4:
                        typeName = "CDATA section"
                        break
                    case 5:
                        typeName = "Entity reference"
                        break
                    case 6:
                        typeName = "Entity"
                        break
                    case 7:
                        typeName = "Processing instruction"
                        break
                    case 8:
                        typeName = "Comment"
                        break
                    case 9:
                        typeName = "Document"
                        break
                    case 10:
                        typeName = "Document type"
                        break
                    case 11:
                        typeName = "Document fragment"
                        break
                    case 12:
                        typeName = "Notation"
                }
                var text

                if (currentNode.nodeValue != null) {
                    text = indentation + "<b>" + typeName +
                    "</b>: " + currentNode.nodeValue
                } else {
                    text = indentation + "<b>" + typeName +
                    "</b>: " + currentNode.nodeName
                }

                if (currentNode.attributes != null) {
                    if (currentNode.attributes.length > 0) {
                        for (var loopIndex = 0; loopIndex <
                            currentNode.attributes.length; loopIndex++) {
                            text += " <b>Attribute</b>: " +
                                currentNode.attributes(loopIndex).nodeName +
                                " = \"" +
                                currentNode.attributes(loopIndex).nodeValue
                                + "\""
                        }
                    }
                }

                text += "<BR>"

                if (currentNode.childNodes.length > 0)  {
                    for (var loopIndex = 0; loopIndex <
                        currentNode.childNodes.length; loopIndex++) {
                        text += childLoop(currentNode.childNodes(loopIndex),
                        indentation + "&nbsp;&nbsp;&nbsp;&nbsp")
                    }
                }
                return text
            }

        </SCRIPT>
    </HEAD>

    <BODY>

           <H1>

               Getting all XML data

           </H1>


           <INPUT TYPE="BUTTON" VALUE="Get all the data"

               onClick = "readXMLData()">

           <DIV ID="displayDIV"></DIV>

       </BODY>
</HTML>

You can see the results of this JavaScript in Figure 15.4. As you can see, by using JavaScript and the W3C DOM, you've been able to parse an entire XML document and list all of its data independently of the document's structure. Not bad!

Figure 15.4 Parsing an entire XML document.

< Back Page 202 of 288 Next >

🔖 Save To Your Account

InformIT Promotional Mailings & Special Offers

I would like to receive exclusive offers and hear about products from InformIT and its family of brands. I can unsubscribe at any time.

Email Address

Sams Teach Yourself XML in 21 Days

Recommended Book

Recommended Book

Recommended Book 

Getting All XML Data from a Document

Example 15.6. Getting All XML Data from a Document (ch15_06.html)

InformIT Promotional Mailings & Special Offers

Example 15.6. Getting All XML Data from a Document (`ch15_06.html`)