PDA

View Full Version : getting xml using DOM

Shaolins-Finest
09-10-2008, 01:13 AM
Hi Guys

I have the following xml:

<AllMail>
<mail>
<id>1</id>
<title>MyMail</title>
<contact>
<id>10</id>
<name>John Mop</name>
<email>sss@sss.com</email>
</contact>
<contact>
<id>13</id>
<name>Jop Gop</name>
<email>4325@sss.com</email>
</contact>
</mail>
<mail>
<id>4</id>
<title>MyMailtotoy</title>
<contact>
<id>4</id>
<name>Jacn Beat</name>
<email>1111@sss.com</email>
</contact>
</mail>
</AllMail>

I want all the content between each <mail></mail> tag to be in a table row each (see example below for further clarification). How can I do this ? Note that the content will be dynamic.

<table>
<tr>
<td id="id">1</td>
<td id="title">MyMail</td>
<td id="contacts">John Mop, Jop Gop</td>
</tr>
<tr>
<td id="id">4</td>
<td id="title">MyMailtotoy</td>
<td id="contacts">Jacn Beat</td>
</tr>
</table>



Thanks
Shaolins-Finest
09-10-2008, 04:23 PM
anyone ? ....
coothead
09-11-2008, 02:10 AM
Hi there Shaolins-Finest,

It took me some while to find a method for loading an xml file in Safari.
Also I found that the table that you showed in your post did not really match your xml file.
Anyway have a look at this example, you may be able to adapt it to your requirements...

page.html:-

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<style type="text/css">
#thetable {
background-color:#fff;
border:1px solid #999;
font-family:arial,sans-serif;
font-size:16px;
color:#000;
margin:30px auto;
}
#thetable td {
border:1px solid #666;
color:#666;
padding:10px;
}
#tr0,#tr2 {
background-color:#eef;
}
#td2,#td6,#td10 {
font-weight:bold;
color:#333;
}
</style>

<script type="text/javascript">

var req,xmlDoc;
var trs=[];
var tds=[];
var data=[];
var m=0;


function loadXMLDoc(url) {
req=false;
if((window.XMLHttpRequest)&&!(window.ActiveXObject)) {
try {
req=new XMLHttpRequest();
}
catch(e) {
req=false;
}
}
else {
if(window.ActiveXObject) {
xmlDoc=new ActiveXObject('Microsoft.XMLDOM');
xmlDoc.async=false;
xmlDoc.load(url);
processXml();
}
}
if(req) {
req.onreadystatechange=processXml;
req.open('GET',url,true);
req.send('');
}
}
window.onload=function() {
loadXMLDoc('allMail.xml')
}
function processXml() {
if(req.readyState==4) {
xmlDoc=req.responseXML;
}
ids=xmlDoc.getElementsByTagName('id');
tit=xmlDoc.getElementsByTagName('title');
nam=xmlDoc.getElementsByTagName('name');
eml=xmlDoc.getElementsByTagName('email');

elements=ids.length+tit.length+nam.length+eml.length; //total number of table cells

rows=ids.length; // number of table rows
cells=elements/rows; //number of cells per row

tbl=document.createElement('table');
tbl.setAttribute('id','thetable');

tby=document.createElement('tbody');

for(c=0;c<rows;c++) {

data.push(ids[c].firstChild.nodeValue,
tit[c].firstChild.nodeValue,
nam[c].firstChild.nodeValue,
eml[c].firstChild.nodeValue
);

trs[c]=document.createElement('tr');
trs[c].setAttribute('id','tr'+c);

for(k=0;k<cells;k++) {

tds[k]=document.createElement('td');
tds[k].setAttribute('id','td'+m);
tds[k].appendChild(document.createTextNode(data[m]));

trs[c].appendChild(tds[k]);
m++;
}
tby.appendChild(trs[c]);
}
tbl.appendChild(tby);
document.getElementById('container').appendChild(tbl);

}
</script>

</head>
<body>

<div id="container"></div>

</body>
</html>

allMail.xml:-

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<AllMail>

<mail>
<id>1</id>
<title>MyMail</title>
<contact>
<nu>10</nu>
<name>John Mop</name>
<email>sss@sss.com</email>
</contact>
</mail>

<mail>
<id>2</id>
<title>Shaolins</title>
<contact>
<nu>13</nu>
<name>Jop Gop</name>
<email>4325@sss.com</email>
</contact>
</mail>

<mail>
<id>4</id>
<title>MyMailtotoy</title>
<contact>
<nu>4</nu>
<name>Jacn Beat</name>
<email>1111@sss.com</email>
</contact>
</mail>

</AllMail>