PDA

View Full Version : XML and JavaScript

ChuckSchuldiner
02-16-2005, 04:52 PM
what i am trying to do is by using javascript i am trying to create a table using the information in a xml file ... i have truncated the javascript code to show only the part that i would use to create the header for the table...

the html code....

<html>

<head>
<Script type="text/javascript">

var IE=(navigator.appName.indexOf("Explorer")>-1);

if(IE)
{

var xmlDoc=new ActiveXObject("MICROSOFT.XMLDOM");
xmlDoc.async=false;
}
else
{
var xmlDoc=document.implementation.createDocument("","doc",null);
}

xmlDoc.load("xml1.xml");

function xmlTable()
{

var papaNode=xmlDoc.getElementsByTagName("child");

//The Table

var tableElement=document.createElement("TABLE");
var tableRow=document.createElement("TR");

//Table Header

for(i=0;i<papaNode[0].childNodes.length;i++)
{

if(papaNode[0].childNodes[i].nodeType!=1)continue;

var tableCell=document.createElement("TH");
var theText=document.createTextNode(papaNode[0].childNodes[i].nodeName);
tableCell.appendChild(theText);
tableRow.appendChild(tableCell);

}

tableElement.appendChild(tableRow);
document.getElementById("p1").appendChild(tableElement);


}

</script>
</head>

<body>

<a href="javascript:xmlTable()">xml table</a>
<br>
<p id="p1"></p>

</body>
</html>

and the XML file(xml1.xml) is...

<?xml version="1.0" encoding="ISO-8859-1"?>

<group>
<child>
<name>Glen Benton</name>
<age>13</age>
<class>1B</class>
</child>
<child>
<name>Sean Reinhardt</name>
<age>12</age>
<class>1B</class>
</child>
<child>
<name>Angel Ripper</name>
<age>14</age>
<class>2C</class>
</child>
</group>


the problem with the above code is that ... when i click on the link "xml table" no data is displayed in the page ... where could i have gone wrong
the header part of the table should look like this...

+-------------------+
| name | age | class |
+-------------------+
Basscyst
02-16-2005, 05:48 PM
I think I just made something similar that might help you out, not totally sure though as I'm still learning this myself. This might point you in the right direction though.


<html>
<head>
<script type="text/javascript" for="window" event="onload">
var xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async="false";
xmlDoc.load("FirstXML.xml");
var nodes=xmlDoc.documentElement.childNodes;
for(var i=0;i<nodes.length;i++)
{
var tr=document.createElement('tr');
for(var j=0;j<nodes.item(i).childNodes.length;j++)
{
var td=document.createElement('td');
var str=document.createTextNode(nodes.item(i).childNodes(j).text);
td.appendChild(str);
tr.appendChild(td);
}
document.getElementById('tb').appendChild(tr);
}
</script>
</head>
<body>
<table border="1">
<thead>
<tr>
<td>Name</td>
<td>Level</td>
<td>Class</td>
<td>Professions</td>
</tr>
</thead>
<tbody id="tb">
</tbody>
</table>
</body>
</html>


XML:

<?xml version="1.0" encoding="ISO-8859-1" ?>
<guild>
<player>
<name>Soulsphere</name>
<lvl>45</lvl>
<class>Warlock</class>
<professions>Tailor (266) , Enchanter (160)</professions>
</player>
<player>
<name>Skeletina</name>
<lvl>46</lvl>
<class>Rogue</class>
<professions>Leatherworking (266) , Skinning (160)</professions>
</player>
</guild>


After reading further through the tutorial at w3schools, I found there are really better ways of accomplishing this.

Basscyst
ChuckSchuldiner
02-17-2005, 06:12 AM
hey i found the answer to my puzzle in another forum ... i was missing the TBODY element ... without which the code wouldnt work in ie but would work 100% fine in firefox even without the TBODY... and yes indeed using XSLT is the best of ways ... just my little experiment with javascript ...
Alex Vincent
02-18-2005, 08:16 AM
Please don't post the same question in two or more forums. It is really bad taste. :)