PDA

View Full Version : Extracting data from XML using JavaScript



hothousegraphix
Jan 21st, 2007, 05:18 PM
I'm bringing in data from an XML document using JavaScript. All works as expected! Except what I attempt to include a hyperlink in my XML.
I've tried simply placing the hyperlink in; I've also tried seperating out the hyperlink using <![CDATA[ ]]>tags; e.g.

<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<news>
<entry>
<date>01.21.2007</date>
<copy>Text Here</copy>
</entry>
<entry>
<date>01.21.2007</date>
<copy>Some More Test Here</copy>
</entry>
<entry>
<date>01.21.2007</date>
<copy>Text w/ a link <![CDATA[<a href="mailto:[email protected]">Drop Us a Line!<a>]]></copy>
</entry>
</news>
Neither of these works. The result is that the link is not displayed at all.

Would someone have advice for me?

Thanks in advance.

david_kw
Jan 21st, 2007, 07:04 PM
Exactly how are you using javascript? Do you have a link to a sample page that shows what you are doing?

david_kw

Ancora
Jan 21st, 2007, 07:53 PM
hothousegraphix:

You need to change the .xml file, as shown, then use the following code:

news.xml


<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<news>
<entry>
<date>01.21.2007</date>
<copy>Text Here</copy>
</entry>
<entry>
<date>01.21.2007</date>
<copy>Some More Test Here</copy>
</entry>
<entry>
<date>01.21.2007</date>
<copy>href="mailto:[email protected]">Drop Us a Line!</copy>
</entry>
</news>




<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Any Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">

var AdminResponse = "";

function parseSettings(){

var nDate = AdminResponse.getElementsByTagName('date');
var nCopy = AdminResponse.getElementsByTagName('copy');
for (i=1; i<nDate.length+1; i++)
{
document.getElementById('date'+i).innerHTML = nDate[i-1].firstChild.data;
if (/^href/.test(nCopy[i-1].firstChild.data))
{
document.getElementById('copy'+i).innerHTML = "<a " + nCopy[i-1].firstChild.data + "</a>";
}
else {
document.getElementById('copy'+i).innerHTML = nCopy[i-1].firstChild.data;
}
}
}

function getNews(){

var AdminRequest = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
AdminRequest.onreadystatechange = function()
{
if (AdminRequest.readyState == 4)
{
if (AdminRequest.status == 200)
{
AdminResponse = AdminRequest.responseXML;
parseSettings();
}
else {
alert('Error news.xml File '+ AdminRequest.statusText);
}
}
}
var forceGET = "?n="+ parseInt(Math.random()*999999999);
AdminRequest.open("GET", "news.xml"+forceGET, true);
AdminRequest.send(null);
}

onload=getNews;

</script>
<style type="text/css">

body {background-color:#eae3c6;margin-top:60px}

</style>
</head>
<body>
<div id='date1'></div>
<div id='copy1'></div>

<div id='date2'></div>
<div id='copy2'></div>

<div id='date3'></div>
<div id='copy3'></div>
</body>
</html>

hothousegraphix
Jan 21st, 2007, 09:22 PM
david_kw - I'm parsing my xml with:

<script type="text/javascript">
// <![CDATA[
var AdminResponse = "";

function parseSettings(){

var nDate = AdminResponse.getElementsByTagName('date');
var nCopy = AdminResponse.getElementsByTagName('copy');
for (i=1; i<nDate.length+1; i++)
{
document.getElementById('date'+i).innerHTML = nDate[i-1].firstChild.data;
document.getElementById('copy'+i).innerHTML = nCopy[i-1].firstChild.data;
}
}

function getNews(){

var AdminRequest = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
AdminRequest.onreadystatechange = function()
{
if (AdminRequest.readyState == 4)
{
if (AdminRequest.status == 200)
{
AdminResponse = AdminRequest.responseXML;
parseSettings();
}
else {
alert('Error news.xml File '+ AdminRequest.statusText);
}
}
}
var forceGET = "?n="+ parseInt(Math.random()*999999999);
AdminRequest.open("GET", "news.xml"+forceGET, true);
AdminRequest.send(null);
}

onload=getNews;
// ]]>
</script>
Solution provided to me by Ancora which works like a charm.

Ancora - when attempting to place the hyperlink within the child node as you've suggested; e.g.

<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<news>
<entry>
<date>01.21.2007</date>
<copy>Text Here</copy>
</entry>
<entry>
<date>01.21.2007</date>
<copy>Some More Test Here</copy>
</entry>
<entry>
<date>01.21.2007</date>
<copy>href="mailto:[email protected]">Drop Us a Line!</copy>
</entry>
</news> //copied from your example, noticed the dropped opening "<" to the href which I corrected in my version
my entire XML document does not render.

I sould probably me more clear in that the link is just a small portion of a larger body of text; e.g.

<entry>
<date>01.21.2007</date>
<copy>I've got a bunch of text that precedes the hyperlink, which appears at the end of an entry like in this example <a href="mailto:[email protected]">Drop Us a Line!</a></copy>
</entry>

I've found a possible solution which invloves the use of Xlink. I've read a number of articles and threads but seem not to find an example that places the hyperlink within a larger body of text. All the examples I've found treat the link as a seperate piece of info placing it within it's own node as show in the example below:

<?xml version="1.0" encoding="ISO-8859-1"?><bookstore xmlns:xlink="http://www.w3.org/1999/xlink"><book title="Harry Potter">
<description
xlink:type="simple"
xlink:href="http://book.com/images/HPotter.gif"
xlink:show="new">
As his fifth year at Hogwarts School of Witchcraft and
Wizardry approaches, 15-year-old Harry Potter is.......
</description>
</book>example source - http://www.w3schools.com/xlink/xlink_reference.asp

The other issue I have is that I'm not sure of is what xlink:type I need to use.

hothousegraphix
Jan 22nd, 2007, 03:55 AM
Here's a link to the project.

www.thesoundcake.com

Each page a has a news section (far right column) which is populated
in the manner discussed above.

david_kw
Jan 22nd, 2007, 06:51 AM
Try changing your xml to something like this



<entry>
<date>01.21.2007</date>
<copy><![CDATA[I've got a bunch of text that precedes the hyperlink, which appears at the end of an entry like in this example <a href="mailto:[email protected]">Drop Us a Line!</a>]]></copy>
</entry>


I think that should change the contents of the <copy> section to have only one child so it will work with the code you are using.

david_kw

Ancora
Jan 22nd, 2007, 11:44 AM
hothousegraphix:

Test the following AS IS. I intentionally excluded the anchor tags. Don't assume the code needs to be "corrected." It doesn't. And, in the future, please try not to piecemeal a problem.

news.xml


<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<news>
<entry>
<date>01.21.2007</date>
<copy>Text Here</copy>
</entry>
<entry>
<date>01.21.2007</date>
<copy>Some More Text Here</copy>
</entry>
<entry>
<date>01.21.2007</date>
<copy>I've got a bunch of text that precedes the hyperlink, which appears at the end of an entry like in this example href="mailto:[email protected]" Drop Us a Line!</copy>
</entry>
</news>




<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Any Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">

var AdminResponse = "";

function parseSettings(){

var nDate = AdminResponse.getElementsByTagName('date');
var nCopy = AdminResponse.getElementsByTagName('copy');
for (i=1; i<nDate.length+1; i++)
{
document.getElementById('date'+i).innerHTML = nDate[i-1].firstChild.data;
if (/^.+href/.test(nCopy[i-1].firstChild.data))
{
document.getElementById('copy'+i).innerHTML = nCopy[i-1].firstChild.data.replace(/^(.+)(href=)(\".+\")(.+)$/,"$1<a $2$3>$4</a>");
}
else {
document.getElementById('copy'+i).innerHTML = nCopy[i-1].firstChild.data;
}
}
}

function getNews(){

var AdminRequest = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
AdminRequest.onreadystatechange = function()
{
if (AdminRequest.readyState == 4)
{
if (AdminRequest.status == 200)
{
AdminResponse = AdminRequest.responseXML;
parseSettings();
}
else {
alert('Error news.xml File '+ AdminRequest.statusText);
}
}
}
var forceGET = "?n="+ parseInt(Math.random()*999999999);
AdminRequest.open("GET", "news.xml"+forceGET, true);
AdminRequest.send(null);
}

onload=getNews;

</script>
<style type="text/css">

body {background-color:#eae3c6;margin-top:60px}

</style>
</head>
<body>
<div id='date1'></div>
<div id='copy1'></div>

<div id='date2'></div>
<div id='copy2'></div>

<div id='date3'></div>
<div id='copy3'></div>
</body>
</html>

hothousegraphix
Jan 22nd, 2007, 04:20 PM
david_kw- I'll gave Ancoras' updated solution a go and it does work. Thanks for your suggestions.

Ancora - I don't understand where you reach the conclusion that I'm piecemealing in order to arrive at a solution to my problem. Perception is such a funny thing. You were very kind to provide a solution to my question about how to parse/then write info grabbed from an XML document to an html/xhtml doc. And I believe I clearly expressed my gratitude.

Let me again thank you for the parsing solution as it does work perfectly.
So you aware it has become clear that there may be a need to included
links in my XML and this is where the origin of my current question comes from.

I'd like to thank you for this current solution. In reviewing your updated
XML I see no tags are to be present; however, because the initial suggestion did not function I examined the XML provided and noticed what looked to be a "<" tag not present (since a closing ">" was). Because no comments were included with this solution I was unaware you intended it to be absent. I simply added it to see if that might allow your suggestion to function.

Thank you for taking the time to assist.

Ancora
Jan 22nd, 2007, 04:46 PM
hothousegraphix:

You're welcome. I appreciate your courtesy. I did not provide an explanation for the first example, because I find myself, repeatedly writing, "test the code AS IS." I do, and I don't post code unless it's been tested. Many, not you, come along, and chop the code into pieces, and attempt to pound those pieces in to another document, and then write, "That don't work!"

I kept that < in the first xml line because I didn't think it would be too much of a burden to remember that "this is the way" you need to format links, from now on. This morning, I thought, well, I'll just go ahead and provide for removing all the tags, to eliminate any confusion.