View Full Version : parsing single lines of xml data into an HTML page
MmmillerDesign
09-01-2009, 10:40 PM
I know what I want to do, but I don't know what language to use. my skill level is just above beginner. I know enough to know it can be done, but not enough to know what to look for or how to do it.
I want to have an html file call data from an xml file.
easy, right?
my boss wants a dedicated (permalink url) html page that is a css styled equivalent of a business card. the project has about 200 names, and they each want a separate page. I have an excel spreadsheet with the names and info that I can convert to an xml file.
I want to be able to set an identifier for the field that I want, kind of like sql
(ex: select * where id="uniqueName") only, the place where I'm working is not allowing me to set up a database. >:( (so no sql or php)
I found a javascript bit that is quite lengthy and only returns 1 line and I need to return fields in several different places.
and I don't even think I'm describing this accurately. GAH!
any suggestions where to start would be welcome!
as an alternative, I could hand code all this info, but updates would be a pain, and it would take forever.
Here is the template code I have to work with (already styled)
<div id="badge">
<div id="topContainer">
<div id="topContainerL"><img src="INSERT PICTURE URL HERE"/></div>
<div id="name"><h1>INSERT NAME</h1></div>
<div id="quoteCopy">
<p>"INSERT QUOTE"</p>
</div>
<div id="quoteName">
<p>-INSERT NAME2</p>
</div>
Thank you!
Mmm
meytally
01-14-2010, 06:04 PM
Hi MMM
It sounds like what you are trying to do is something I have recently done. Here's my code below. Essentially the page is pulling data from XML tags on the fly. The only part that I don't know how to do is to add a URL identifying parameter. This script will show ALL XML data on the same page... but maybe it's a good start for you to work from?
The first part is the javascript that calls the XML file. The second part is the javascript that populates a table with the data from the XML file that was called in the first part. **Note that in order for this to work the XML file and the HTML page must live on the SAME server.
M
<script type="text/javascript">
if (window.XMLHttpRequest)
{
xhttp=new window.XMLHttpRequest();
}
else // Internet Explorer 5/6
{
xhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET","your_file_with_full_http_path.xml",false);
xhttp.send("");
xmlDoc=xhttp.responseXML;
</script>
<script type="text/javascript">
document.write("<table border='0' style='font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#333333; border:#333333 1px solid; text-align:center' cellpadding='5' cellspacing='0'>");
document.write("<thead><tr><td style='border-bottom:#333333 1px solid'><strong>row 1</strong></td><td style='border-bottom:#333333 1px solid'><strong>row 2</strong></td><td style='border-bottom:#333333 1px solid'><strong>row 3</strong></td></tr></thead>");
var x=xmlDoc.getElementsByTagName("xmlnamegoeshere");
for (i=0;i<x.length;i++)
{
document.write("<tr><td style='border-bottom:#333333 1px solid'>");
document.write(x[i].getElementsByTagName("row_1")[0].childNodes[0].nodeValue);
document.write("</td><td style='border-bottom:#333333 1px solid'>");
document.write(x[i].getElementsByTagName("row_2")[0].childNodes[0].nodeValue);
document.write("</td><td style='border-bottom:#333333 1px solid'>");
document.write(x[i].getElementsByTagName("row_3")[0].childNodes[0].nodeValue);
document.write("</td></tr>");
}
document.write("</table>");
</script>
ll7ll
05-22-2010, 03:19 AM
Hi meytally ..
This sounds exactly like what i want to do, but i cant get your example to work ..
Here is my code ...
<script type="text/javascript">
if (window.XMLHttpRequest)
{
xhttp=new window.XMLHttpRequest();
}
else // Internet Explorer 5/6
{
xhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET","zazz_data_1.xml",false);
xhttp.send("");
xmlDoc=xhttp.responseXML;
</script>
<script type="text/javascript">
document.write("<table border='0' style='font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#333333; border:#333333 1px solid; text-align:center' cellpadding='5' cellspacing='0'>");
document.write("<thead><tr><td style='border-bottom:#333333 1px solid'><strong>row 1</strong></td><td style='border-bottom:#333333 1px solid'><strong>row 2</strong></td><td style='border-bottom:#333333 1px solid'><strong>row 3</strong></td></tr></thead>");
var x=xmlDoc.getElementsByTagName("headline");
for (i=0;i<x.length;i++)
{
document.write("<tr><td style='border-bottom:#333333 1px solid'>");
document.write(x[i].getElementsByTagName("row_1")[0].childNodes[0].nodeValue);
document.write("</td><td style='border-bottom:#333333 1px solid'>");
document.write(x[i].getElementsByTagName("row_2")[0].childNodes[0].nodeValue);
document.write("</td><td style='border-bottom:#333333 1px solid'>");
document.write(x[i].getElementsByTagName("row_3")[0].childNodes[0].nodeValue);
document.write("</td></tr>");
}
document.write("</table>");
</script>
and here is the xml (called zazz_data_1.xml) .....
<?xml version="1.0"?>
<data_project xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema">
<table name="zazz">
<rows>
<row>
<columns>
<column name="start_url"><![CDATA[http://www.zazz.com.au]]></column>
<column name="deal-image"><![CDATA[http://www.zazz.com.au/images/products/Retro_USB_Cassette_Deck_image13496.jpg]]></column>
<column name="headline"><![CDATA[Retro USB Cassette Deck]]></column>
<column name="price"><![CDATA[$49.95]]></column>
</columns>
<tables>
</tables>
</row>
</rows>
</table>
</data_project>
What am i doing wrong???
Thanks
vBulletin® v3.8.2, Copyright ©2000-2012, Jelsoft Enterprises Ltd.