Reading a XML Document with JavaScript in Chrome

Question

The following works perfectly to dynamically create a table from XML with JavaScript in IE, but not Chrome... I've tried everything I can think, and this get the best results in chrome, but still doesn't display all the info.. this actually display "undefined" in every cell, and the Chrome tries to get childNode that doesn't exist and stops. The error that the Chrome debug throws is:

"Uncaught TypeError: Cannot read property 'childNodes' of undefined"...

Does anyone have a good example of building a html table from an xml document that's cross browser compatible? or does anyone know what needs to be changed to make this work in Chrome? I've read through numerous Q&A here on Stack Overflow in regards to this topic, and none address this issue specifically.

var rSecTable = null;
function buildSecTable() {
var DASHBOARD = new DASHBOARDUI();
var XMLDoc = DASHBOARD.DASHDataSource("DashboardService.asmx/RecentSecurityChanges?");
var element = 'secTbl';
var rootNode = 'Security';
var objNode = 'results';
var tblhdClass = 'DASHTableHead';
var innerNodes = new Array("time", "search_text", "name"); // for now, these need to be in reverse order
rSecTable = DASHBOARD.DASHDataTableXML(element, XMLDoc, rootNode, objNode, innerNodes, tblhdClass);
}

function DASHBOARDUI() {

this.DASHDataSource = function (url) {
    var xmlDoc;
    var xmlhttp;
    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    }
    else {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.open("GET", url, false);
    xmlhttp.send();
    xmlDoc = xmlhttp.responseXML;
    return xmlDoc;
}

this.isEvenRow = function (value) {
    if (value % 2 == 0)
        return 'DASHTableBodyEven';
    else
        return 'DASHTableBodyOdd';
}

this.DASHTableHeaderFormatter = function (text) {
    var value = "";
    if (text == 'name') {
        value = 'User Name';
    }
    else if (text == 'search_text') {
        value = 'Search Syntax';
    }
    else if (text == 'time') {
        value = 'Date\/Time';
    }
    else if (text == 'rights') {
        value = 'Current Security Rights';
    }
    else if (text == 'Volume_Name') {
        value = 'Volume Name';
    }
    else if (text == 'Size_On_Disk') {
        value = 'Volume Size On Disk (GB)';
    }
    else if (text == 'Total_Disk_Space') {
        value = 'Total Disk Space Where Volume Resides (GB)';
    }
    else {
        value = text;
    }
    return value;
}


this.DASHDataTableXML = function (element, xmlDoc, rootNode, objectNode, innerNodes, tblhdClass) {
    // assign base object node and child count
    var root = xmlDoc.getElementsByTagName(rootNode)[0];
    var rowcount = root.childNodes.length;
    var oNodeOne = xmlDoc.getElementsByTagName(objectNode)[0];
    var colcount = oNodeOne.childNodes.length;

    // call table element (must be a 'table' tag for now)
    var dt = document.getElementById(element);
    dt.className = 'DASHTable';

    var hdRow = dt.insertRow(0);
    hdRow.className = tblhdClass;
    var i = 0;
    for (n in innerNodes) {
        var nCell = hdRow.insertCell(i);
        nCell.innerHTML = this.DASHTableHeaderFormatter(innerNodes[n]);
    }

    for (var j = 0; j < rowcount; j++) {
        var newRow = dt.insertRow(j + 1);
        newRow.className = this.isEvenRow(j);
        for (var y = 0; y < colcount; y++) {
            var dataCell = newRow.insertCell(y);
            var base = xmlDoc.getElementsByTagName(objectNode)[j];
            var xNodeName = innerNodes[n];
            var node = base.childNodes[y];
            if (node.nodeType == 1) {
                var value = node.text;
                dataCell.innerHTML = value;
            }
        }
    }
}

}

Example XHR Return:

<?xml version="1.0" ?> 
<Security>
<results>
<name>Bill</name> 
<rights>Scan , Export , Print , Search , Delete , Import , Move , Process , Edit ,     Migrate , Get Information , Apply Watermarks</rights> 
<time>8/29/2011 3:58:30 PM</time> 
</results>
<results>
<name>Mary</name> 
<rights>Scan , Export , Print , Search , Delete , Import , Move , Process , Edit , Migrate , Get Information , Apply Watermarks</rights> 
<time>8/19/2011 4:33:45 PM</time> 
</results>
<results>
<name>Paul</name> 
<rights>Scan , Export , Print , Delete , Import , Move , Process , Migrate , Get Information , Apply Watermarks</rights> 
<time>8/19/2011 4:33:38 PM</time> 
</results>
<results>
<name>Jane</name> 
<rights>Export , Print , Import , Edit , Migrate</rights> 
<time>8/19/2011 4:32:57 PM</time> 
</results>
<results>
<name>Walter</name> 
<rights>Scan , Export , Print , Import , Move , Process , Edit</rights> 
<time>8/19/2011 4:31:23 PM</time> 
</results>
<results>
<name>Frank</name> 
<rights>Scan , Import , Move , Process , Edit</rights> 
<time>8/19/2011 4:17:44 PM</time> 
</results>
<results>
<name>Dan</name> 
<rights>Scan , Import</rights> 
<time>8/19/2011 3:49:18 PM</time> 
</results>
<results>
<name>Tom</name> 
<rights>Scan , Export , Print , Search , Import , Move , Process , Edit , Apply Watermarks</rights> 
<time>8/19/2011 3:36:24 PM</time> 
</results>
<results>
<name>Russ</name> 
<rights>Scan , Export , Print , Search , Delete , Import , Move , Process , Edit , Migrate , Get Information , Apply Watermarks</rights> 
<time>8/16/2011 4:31:43 PM</time> 
</results>
<results>
<name>ADMIN</name> 
<rights>Scan , Export , Print , Search , Delete , Import , Move , Process , Edit , Migrate , Get Information , Apply Watermarks</rights> 
<time>8/16/2011 2:23:47 PM</time> 
</results>
</Security>

Case-sensitivity of the xml element names? Would help to see the XML and know if you even get an XML document back from the XHR call. — Paul Grime
– Paul Grime, Commented Sep 10, 2011 at 20:57
I'm debugging with VS 2010, and adding a breakpoint at the start of this function this.DASHDataTableXML. I'm getting a complete xml document.. and like I said in the description, this code work perfectly in IE. IF I wasn't getting an xml document back from the xlr call, it would work in IE either. I am going to check the case-sensitivity of the xml element name... maybe I'm over looking something there. Paul, from your response, I would assume you don't see anything fundamentally wrong with my code in regards to it successfully building a table from javascript? — wakurth
– wakurth, Commented Sep 12, 2011 at 1:35
Seems ok. Your use of var xNodeName = innerNodes[n] seems a bit suspect as what value do you think n will have? I'd also use Node.ELEMENT_NODE instead of the 'magic' value 1 in your final if. — Paul Grime
– Paul Grime, Commented Sep 12, 2011 at 8:28
@Paul, thank you for the insight.. I am trying you suggestions now. I've added an example of the xml I'm geting the the XHR Call. — wakurth
– wakurth, Commented Sep 12, 2011 at 14:48
... you are absolute correct to suspect xNodeName = innerNodes[n] ... that line did nothing. it was from a previous attempt to make this work ... oops. I'll post the working code for this when I get it sorted out. thanks again. — wakurth
– wakurth, Commented Sep 12, 2011 at 15:03

Paul Grime · Accepted Answer · 2011-09-12 16:55:30Z

1

The only error I could find was that you use

var value = node.text

instead of

var value = node.firstChild.nodeValue

The node is an Element that has a single child Node that is a TextNode, and so you need to use this node.firstChild.nodeValue pattern.

I use a for (var n = 0 ... loop instead of for (n in ... as sometimes JS frameworks can alter the Array object and this has nasty side-effects.

There's an example at this jsfiddle link.

answered Sep 12, 2011 at 16:55

Paul Grime

15.1k4 gold badges39 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

wakurth Over a year ago

thank you. node.firstChild.nodeValue works across all browsers instead of executing different code for different browser type. and believe it or not, i've never heard of jsfiddle before... what a great tool!. Thanks again.

Collectives™ on Stack Overflow

Reading a XML Document with JavaScript in Chrome

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related