CeltRuler.com

< Parse XML Doc >

Here is a way to read the contents of an XML file with Javascript, displaying the information dynamically onto an HTML page. In this demonstration there is a menu of product categories, which when moused-over, will cause a list to be displayed with a range of items relevant to the product category selected. There are 2 files shown below that will have to be copied and pasted in order to run the program.

List of Products in Category A

List of Products in Category B

List of Products in Category C

parseXML.html

<html>
<head>
<script type="text/javascript">

// basic function for loading an XML file
function loadXML(file) {
 try {
 // firefox, mozilla, opera, IE7/8 etc...     
 var req = new XMLHttpRequest();
 req.open("GET", file, false);
 req.send(null);
 return req.responseXML;
 }
 catch (e) {
 try {
 // internet explorer 4/5/6
 var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
 xmlDoc.async = false;
 xmlDoc.load(file);
 return xmlDoc;
 }
 catch (e) {
 alert(e.message);
 return null;
 }
 }
} 

</script>
</head>
<body>

<a name="A" id="A" href="#" onmouseover="showSelectedCategory(this)"
style="color: blue">List of Products in Category A</a> <br /> <br />
<a name="B" id="B" href="#" onmouseover="showSelectedCategory(this)"
style="color: red">List of Products in Category B</a> <br /> <br />
<a name="C" id="C" href="#" onmouseover="showSelectedCategory(this)"
style="color: green">List of Products in Category C</a> <br /> <br />

<br /> <br />

<!-- Following divs will display the data from the XML file.
 Dropdown boxes would work just as well -->

<div name="item0" id="item0"></div>
<div name="price0" id="price0"></div>
<div name="id0" id="id0"></div>

<br /> <br />

<div name="item1" id="item1"></div>
<div name="price1" id="price1"></div>
<div name="id1" id="id1"></div>

<br /> <br />

<div name="item2" id="item2"></div>
<div name="price2" id="price2"></div>
<div name="id2" id="id2"></div>

<br /> <br />

<div name="item3" id="item3"></div>
<div name="price3" id="price3"></div>
<div name="id3" id="id3"></div>

<script type="text/javascript">

var xmlDoc = loadXML("products.xml");

function showSelectedCategory(coloredLink) {

    var category = coloredLink.name;
    var categoryCounter = 0;
    var divNum = 4; // # of div sections. Example: 0,1,2,3 so that's 4

    for (var i = 0; i < xmlDoc.getElementsByTagName("product").length; i++) {

        var item = "item" + categoryCounter;
        var price = "price" + categoryCounter;
        var id = "id" + categoryCounter;
 
        // if the category variable matches a category in the XML file...
        if (xmlDoc.getElementsByTagName("product")
 [i].attributes.getNamedItem("category").nodeValue == category) {  

      
            // assign the XML data in the category to the divs for display
            document.getElementById(item).innerHTML =
 xmlDoc.getElementsByTagName("item")[i].childNodes[0].nodeValue;
            document.getElementById(price).innerHTML =
 xmlDoc.getElementsByTagName("price")[i].childNodes[0].nodeValue;
            document.getElementById(id).innerHTML =
 xmlDoc.getElementsByTagName("id")[i].childNodes[0].nodeValue;

            // increment by 1 each time the category matches
            categoryCounter++;


        } // end if
 
    } // end for-loop

    
    for (var straggler = categoryCounter; straggler < divNum; straggler++) {

        // these variables get assigned new values    
        item = "item" + straggler;
        price = "price" + straggler;
        id = "id" + straggler;        

	// set to blank
        document.getElementById(item).innerHTML = "";
        document.getElementById(price).innerHTML = "";
        document.getElementById(id).innerHTML = "";

    }

}
</script>
</body>
</html>

products.xml

<products>
 <product category="A">
 <item>Alligator French Roast 5 lb Bag (6.90/lb)</item>
 <price>34.50</price>
 <id>1000</id>
 </product>
 <product category="A">
 <item>Allstars Blend 5 lb Bag (6.65/lb)</item>
 <price>32.25</price>
 <id>1001</id>
 </product>
 <product category="B">
 <item>Beachcomber 10 lb Bag (7.90/lb)</item>
 <price>39.50</price>
 <id>1100</id>
 </product>
 <product category="B">
 <item>Bradford's 10 lb Bag (7.65/lb)</item>
 <price>39.25</price>
 <id>1101</id>
 </product>
 <product category="B">
 <item>Berry's 10 lb Bag (7.98/lb)</item>
 <price>41.25</price>
 <id>1102</id>
 </product>
 <product category="C">
 <item>Cherry Roast 15 lb Bag (8.90/lb)</item>
 <price>44.50</price>
 <id>1200</id>
 </product>
 <product category="C">
 <item>Carnival Blend 15 lb Bag (8.65/lb)</item>
 <price>47.25</price>
 <id>1201</id>
 </product>
 <product category="C">
 <item>Chocolate Blend 15 lb Bag (8.88/lb)</item>
 <price>57.25</price>
 <id>1202</id>
 </product>
 <product category="C">
 <item>Chai Blend 15 lb Bag (8.99/lb)</item>
 <price>62.25</price>
 <id>1203</id>
 </product>
</products>

< Previous Page

Tidbits

< Parse XML Doc >