Hilton
03-20-2006, 12:54 PM
Hello, there! I have the following problem. I am trying to present data that resides in a XML file in a HTML page. I got a code sample from someone over the Internet and modified to my needs, but there is a snag. It does a great job presenting the data, as long as all fields in the XML database have a value, but if one field is empty, it fails.
In this database, some of the fields sometimes are empty, such as "Middle Initial," for example. I cannot control it, as the data will be populated by users. One single empty field makes the code fail. In the example below, if for instance the cause of death is blank, the code fails to present the data.
I think my question is how to adjust the JavaScript code to skip or add a blank character when it finds an empty field while reading the XML database.
Thanks in advance for your help! :confused:
Here is the sample HTML code:
<html>
<head>
<title>Page title</title>
<SCRIPT type="text/javascript" src="importxml.js">
// Load import XML file
</SCRIPT>
</head>
<body>
<SCRIPT type="text/javascript">
//Specify path to xml file
///var xmlsource="../xml/directory.xml"
//Specify record name of xml file
///var xmlrecord="extension"
var t = importXML()
</SCRIPT>
Roman Emperors<br>
<p id="writeroot">
</body>
</html>
Here is the JavaScript code:
// Thanks to Peter-Paul Koch, from QuirksMode.org
// Specify path to xml file
var xmlsource="emperors.xml"
// Specify path to xml file
var xmlsubtag="extension"
//Regular expression used to match any non-whitespace character
var notWhitespace = /\S/
function importXML()
{
if (document.implementation && document.implementation.createDocument)
{
xmlDoc = document.implementation.createDocument("", "", null);
xmlDoc.onload = createTable;
}
else if (window.ActiveXObject)
{
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.onreadystatechange = function () {
if (xmlDoc.readyState == 4) createTable()
};
}
else
{
alert('Your browser can\'t handle this script');
return;
}
/// xmlDoc.load('emperors.xml');
xmlDoc.load(xmlsource);
}
function createTable()
{
/// var x = xmlDoc.getElementsByTagName('emperor');
var x = xmlDoc.getElementsByTagName(xmlsubtag);
/// //REMOVE white spaces in XML file. Intended mainly for NS6/Mozilla
/// for (i=0;i<x[0].childNodes.length;i++){
/// if ((x[0].childNodes[i].nodeType == 3)&&(!notWhitespace.test(x[0].childNodes[i].nodeValue))) {
/// x[0].removeChild(x[0].childNodes[i])
/// i--
/// }
/// }
var newEl = document.createElement('TABLE');
newEl.setAttribute('cellPadding',5);
var tmp = document.createElement('TBODY');
newEl.appendChild(tmp);
var row = document.createElement('TR');
for (j=0;j<x[0].childNodes.length;j++)
{
if (x[0].childNodes[j].nodeType != 1) continue;
var container = document.createElement('TH');
var theData = document.createTextNode(x[0].childNodes[j].nodeName);
container.appendChild(theData);
row.appendChild(container);
}
tmp.appendChild(row);
for (i=0;i<x.length;i++)
{
var row = document.createElement('TR');
for (j=0;j<x[i].childNodes.length;j++)
{
if (x[i].childNodes[j].nodeType != 1) continue;
var container = document.createElement('TD');
///Test if the record field is empty
var test = x[i].childNodes[j].nodeType;
var test0 = x[i].childNodes[j].firstChild.length;
var test1 = x[i].childNodes[j].firstChild.nodeValue;
if (x[i].childNodes[j].lenght != 0)
var theData = document.createTextNode(x[i].childNodes[j].firstChild.nodeValue);
else
var theData = document.createTextNode('');
container.appendChild(theData);
row.appendChild(container);
}
tmp.appendChild(row);
}
document.getElementById('writeroot').appendChild(newEl);
}
And here is the sample XML database:
<emperors>
<emperor>
<name>Augustus</name>
<rule>27BC-14AD</rule>
<death>Peaceful</death>
</emperor>
<emperor>
<name>Tiberius</name>
<rule>14-37</rule>
<death>Murdered by his great-nephew and the commander of his bodyguard</death>
</emperor>
<emperor>
<name>Caligula</name>
<rule>37-41</rule>
<death>Murdered by the commander of his bodyguard (a different one than the one before)</death>
</emperor>
<emperor>
<name>Claudius</name>
<rule>41-54</rule>
<death>Poisoned by his fourth wife</death>
</emperor>
<emperor>
<name>Nero</name>
<rule>54-68</rule>
<death>Suicide after losing the Empire</death>
</emperor>
</emperors>
In this database, some of the fields sometimes are empty, such as "Middle Initial," for example. I cannot control it, as the data will be populated by users. One single empty field makes the code fail. In the example below, if for instance the cause of death is blank, the code fails to present the data.
I think my question is how to adjust the JavaScript code to skip or add a blank character when it finds an empty field while reading the XML database.
Thanks in advance for your help! :confused:
Here is the sample HTML code:
<html>
<head>
<title>Page title</title>
<SCRIPT type="text/javascript" src="importxml.js">
// Load import XML file
</SCRIPT>
</head>
<body>
<SCRIPT type="text/javascript">
//Specify path to xml file
///var xmlsource="../xml/directory.xml"
//Specify record name of xml file
///var xmlrecord="extension"
var t = importXML()
</SCRIPT>
Roman Emperors<br>
<p id="writeroot">
</body>
</html>
Here is the JavaScript code:
// Thanks to Peter-Paul Koch, from QuirksMode.org
// Specify path to xml file
var xmlsource="emperors.xml"
// Specify path to xml file
var xmlsubtag="extension"
//Regular expression used to match any non-whitespace character
var notWhitespace = /\S/
function importXML()
{
if (document.implementation && document.implementation.createDocument)
{
xmlDoc = document.implementation.createDocument("", "", null);
xmlDoc.onload = createTable;
}
else if (window.ActiveXObject)
{
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.onreadystatechange = function () {
if (xmlDoc.readyState == 4) createTable()
};
}
else
{
alert('Your browser can\'t handle this script');
return;
}
/// xmlDoc.load('emperors.xml');
xmlDoc.load(xmlsource);
}
function createTable()
{
/// var x = xmlDoc.getElementsByTagName('emperor');
var x = xmlDoc.getElementsByTagName(xmlsubtag);
/// //REMOVE white spaces in XML file. Intended mainly for NS6/Mozilla
/// for (i=0;i<x[0].childNodes.length;i++){
/// if ((x[0].childNodes[i].nodeType == 3)&&(!notWhitespace.test(x[0].childNodes[i].nodeValue))) {
/// x[0].removeChild(x[0].childNodes[i])
/// i--
/// }
/// }
var newEl = document.createElement('TABLE');
newEl.setAttribute('cellPadding',5);
var tmp = document.createElement('TBODY');
newEl.appendChild(tmp);
var row = document.createElement('TR');
for (j=0;j<x[0].childNodes.length;j++)
{
if (x[0].childNodes[j].nodeType != 1) continue;
var container = document.createElement('TH');
var theData = document.createTextNode(x[0].childNodes[j].nodeName);
container.appendChild(theData);
row.appendChild(container);
}
tmp.appendChild(row);
for (i=0;i<x.length;i++)
{
var row = document.createElement('TR');
for (j=0;j<x[i].childNodes.length;j++)
{
if (x[i].childNodes[j].nodeType != 1) continue;
var container = document.createElement('TD');
///Test if the record field is empty
var test = x[i].childNodes[j].nodeType;
var test0 = x[i].childNodes[j].firstChild.length;
var test1 = x[i].childNodes[j].firstChild.nodeValue;
if (x[i].childNodes[j].lenght != 0)
var theData = document.createTextNode(x[i].childNodes[j].firstChild.nodeValue);
else
var theData = document.createTextNode('');
container.appendChild(theData);
row.appendChild(container);
}
tmp.appendChild(row);
}
document.getElementById('writeroot').appendChild(newEl);
}
And here is the sample XML database:
<emperors>
<emperor>
<name>Augustus</name>
<rule>27BC-14AD</rule>
<death>Peaceful</death>
</emperor>
<emperor>
<name>Tiberius</name>
<rule>14-37</rule>
<death>Murdered by his great-nephew and the commander of his bodyguard</death>
</emperor>
<emperor>
<name>Caligula</name>
<rule>37-41</rule>
<death>Murdered by the commander of his bodyguard (a different one than the one before)</death>
</emperor>
<emperor>
<name>Claudius</name>
<rule>41-54</rule>
<death>Poisoned by his fourth wife</death>
</emperor>
<emperor>
<name>Nero</name>
<rule>54-68</rule>
<death>Suicide after losing the Empire</death>
</emperor>
</emperors>