PDA

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>&quot;INSERT QUOTE&quot;</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