14.8 Converting an XML Node Tree to JavaScript Objects

NN 6, IE 5(Win)

14.8.1 Problem

You want to convert XML data (either loaded from an external file or embedded as an IE/Windows data island) into JavaScript objects for further manipulation by scripts.

14.8.2 Solution

The following XML2JS( ) function assumes a regular, record-like structure to the XML data (or portion of data that is significant to the page). Two parameters are required: a reference to the XML virtual document object (see Recipe 14.4) and the tag name of the XML document's element that is the parent node of the repeated records:

// convert XML data into JavaScript array of JavaScript objects
function XML2JS(xmlDoc, containerTag) {
    var output = new Array( );
    var rawData = xmlDoc.getElementsByTagName(containerTag)[0];
    var i, j, oneRecord, oneObject;
    for (i = 0; i < rawData.childNodes.length; i++) {
        if (rawData.childNodes[i].nodeType =  = 1) {
            oneRecord = rawData.childNodes[i];
            oneObject = output[output.length] = new Object( );
            for (j = 0; j < oneRecord.childNodes.length; j++) {
                if (oneRecord.childNodes[j].nodeType =  = 1) {
                    oneObject[oneRecord.childNodes[j].tagName] = 
                        oneRecord.childNodes[j].firstChild.nodeValue;    
                }
            }
        }
    }
    return output;
}

This function returns an array of JavaScript objects whose property names are the XML tag names, and whose property values are the text nodes of the XML tags.

14.8.3 Discussion

For an example of invoking the function shown in the Solution, consider the World Cup final match XML data file shown in the Discussion in Recipe 14.4. The element acting as the parent to the repeated record-like data is called worldcup. This is the tag name passed as the second parameter to the XML2JS( ) function. Capture the results in a global variable for use any time while the page remains loaded:

var matchData = XML2JS(xDoc, "worldcup");

The results are in the form of a JavaScript array of JavaScript objects. The object for the first record is the same object as if it were defined in JavaScript syntax:

matchData[0] = {loser:"Argentina", losscore:"2", location:"Uruguay", 
                winner:"Uruguay", winscore:"4", year:"1930"};

With the data in JavaScript format, you have substantial flexibility in how you wish to mine the data for rendering in HTML. JavaScript's built-in array sorting capabilities substantially speeds and simplifies sorting the data according (over and above XSL transforms) to any one of the object properties, and then rerendering the sorted data. If you are showing the data in tabular form, Recipe 14.16 demonstrates how to sort the data and redraw the table in an instant, rather than sending the request back to the server for reconstitution of the page.

You might wonder why you'd bother with the conversion process, since you can transform XML data into HTML directly (as in Recipe 14.6). The benefit, as you can see in Recipe 14.16, is the data in a JavaScript array of objects is much easier to access through scripts. Moreover, you can take advantage of powerful array-sorting routines that would be incredibly clumsy to reproduce using a DOM node tree as the data repository. Making tables that are sortable by a variety of columns is a comparative snap.

14.8.4 See Also

Recipe 14.4 for loading XML data into a page; Recipe 14.6 for converting XML data directly to an HTML table; Recipe 14.16 for sorting dynamically generated tables; Recipe 3.11 for sorting an array of objects.