BC465Chapter 57Application: Transforming XML Datatr.East {background-color:#FFFFCC} (Web site management) tr.Central {background-color:#CCFFFF}
BC465Chapter 57Application: Transforming XML Datatr.East {background-color:#FFFFCC} tr.Central {background-color:#CCFFFF} tr.West {background-color:#FFCCCC} tr.QTotal {background-color:#FFFF00} td.repTotal {background-color:#FFFF00} td.grandTotal{background-color:#00FF00} h1 {font-family: Comic Sans MS ,Helvetica,sans-serif} One stylesheet rule is essential: The one that suppresses the rendering of any XML element. That data is hidden from the user s view. Initialization sequenceAn onloadevent handler invokes the init()function, which sets a lot of machinery inmotion to get the document ready for user interaction. After loading the XML file into thexDocglobal variable (via the loadXMLDoc()function), its most important job is running aforloop that builds the JavaScript database from the XML elements. Next, it sorts thedatabase based on the current choice in the sorting selectelement. The sorting functionends by triggering the rendering of the table. These three actions correspond to the funda- mental operation of the entire application. // initialize global variable that stores JavaScript datavar db = new Array(); // Initialization called by onLoadfunction init() { loadXMLDoc( salesrpt.xml ); if (xDoc) { for (var i = 0; i < xDoc.getElementsByTagName( salesrep ).length; i++) { db[db.length] = getOneSalesRep(i); } selectSort(document.getElementById( sortChooser )); } } Converting the dataThe controlling factor for creating the JavaScript database is the structure of the XML data. Withthe complete XML document stored in the xDocvariable, scripts can use DOM methods to lookfor elements bearing relevant tag names. Data for each sales rep is contained by a salesrepele- ment. The number of salesrepelements determines how many records (JavaScript objects) areto be added to the dbarray. A call to the getOneSalesRep()function creates an object for eachsales representative s data. Despite the length of the getOneSalesRep()function, its operation is very straightfor- ward. Most of the statements do nothing more than retrieve the data inside the variousXML elements within a salesrepcontainer and assign that data to a like-named property of the custom object. Following the structure of the XML example shown earlier in thischapter, you can see where some properties of a JavaScript object representing the dataare, themselves, objects or arrays. For example, one of the properties is called manager, corresponding to the managerelement. But that element has nested items inside. Then, making those nested elements properties of a managerobject is only natural. Similarly, the repetitive nature of the data within each of the four quarterly periods calls for evengreater nesting: The object property named salesis an array, with each item of the array