Menu
I appreciate any help that can be provided. I’m trying to teach myself how to load an XML document to a JavaScript Array and then present the data in an HTML table. I have pieced together the following code from a JavaScript book that I am using to teach myself.
There is an onload event to call the loadxml function which calls the XML2JS function to load the matchData array, then it will call the drawTable function to display the table.
I do not get any errors but the data is not displaying. I am testing in IE. I know I don’t have the Mozilla code correct yet – but just trying to figure it out in IE for now. I don’t know which part of the code may be the problem. THANKS!
<html>
<head>
<title>jsobjects</title>
<style type=”text/css”>
table {table-collapse:collapse; border-spacing:0}
td {border:2px groove black; padding:7px; background-color:ccffcc}
th {border:2px groove black; padding:7px; background-color:ccffcc}
.ctr {text-align:center}
</style>
<script language=”JavaScript” type=”text/JavaScript”>
var xmlDoc;
function loadXML()
{
// code for IE
if (window.ActiveXObject)
{
xmlDoc=new ActiveXObject(“Microsoft.XMLDOM”);
xmlDoc.async=false;
xmlDoc.load(“worldcup.xml”);
var matchData = XML2JS(xmlDoc, “worldcup”);
drawTable(matchData);
}
// code for Mozilla, Firefox, Opera, etc.
else if (document.implementation &&
document.implementation.createDocument)
{
xmlDoc=document.implementation.createDocument(“”,””,null);
xmlDoc.load(“worldcup.xml”);
xmlDoc.onload=drawTable(matchData);
}
else
{
alert(‘Your browser cannot handle this script’);
}
}
//convert XML data in to 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;
}
//draw table from ‘jsData’ array of objects
function drawTable(tbody) {
var tr, td;
tbody = document.getElementById(tbody);
//loop through data source
for (var i = 0; i < matchData.length; i++) {
tr = tbody.insertRow(tbody.rows.length);
td = tr.insertCell(tr.cells.length);
td.setAttribute(“align”, “center”);
td.innerHTML = matchData[i].year;
td = tr.insertCell(tr.cells.length);
td.innerHTML = matchData[i].location;
td = tr.insertCell(tr.cells.length);
td.innerHTML = matchData[i].winner;
td = tr.insertCell(tr.cells.length);
td.innerHTML = matchData[i].loser;
td = tr.insertCell(tr.cells.length);
td.setAttribute(“align”, “center”);
td = tr.insertCell(tr.cells.length);
td.innerHTML = matchData[i].winscore + ” – ” + matchData[i].losscore;
}
}
</script>
</head>
<body onload=”loadXML()”>
<table id=”cupFinals”>
<thead>
<tr>
<th>Year</th>
<th>Host Country</th>
<th>Winner</th>
<th>Loser</th>
<th>Score (Win – Lose)</th>
</tr>
</thead>
<tbody id=”matchData”></tbody>
</table>
</body>
</html>
Here’s the XML document:
<xml id=”myData” style=”display:none”>
<worldcup>
<final>
<location>Uruguay</location>
<year>1930</year>
<winner>Uruguay</winner>
<winscore>4</winscore>
<loser>Argentina</loser>
<losscore>2</losscore>
</final>
<final>
<location>Italy</location>
<year>1934</year>
<winner>Italy</winner>
<winscore>2</winscore>
<loser>Czechoslovakia</loser>
<losscore>1</losscore>
</final>
</worldcup>
</xml>
*************************’
Thanks again very much for any help!