Fetch & Read XML Data into HTML File?

[Richard In Va.]

Would anyone know how I can fetch and read xml data to display in a html
file?

I'm building a local (unpublished) webpage to be a personal homepage on my
PC. When I open/refresh the html file, I would like it to fetch an xml file
type <?xml version="1.0" encoding="ISO-8859-1" ?> from the internet and
parse/read some of the data to display in the webpage using standard
html/ccs.

I assume a script will be needed for this but I'm not finding any online
free scripts for something like this.

Anyone got any ideas? Just wanting a 7-day weather forecast on my home
page... If beggars can be choosers, I would prefer to not have any external
applications or files to call from the html file, and the fetched xml file
could download to my std temporary internet files folder to be replaced at
the next refresh.


Thanks,

Richard in VA.
+++++++++++

[Martin Honnen]

Post by Richard In Va.
Would anyone know how I can fetch and read xml data to display in a html
file?
I'm building a local (unpublished) webpage to be a personal homepage on my
PC. When I open/refresh the html file, I would like it to fetch an xml file
type <?xml version="1.0" encoding="ISO-8859-1" ?> from the internet and
parse/read some of the data to display in the webpage using standard
html/ccs.

You could build a HTA (HTML application) on Windows and then use
JavaScript and MSXML to load and parse the XML document.
I suggest using a HTA instead of a normal web page as with normal web
pages rendered in a browser you are not allowed to access domains other
than the one your HTML document has been loaded from.
HTAs are documented here:
http://msdn.microsoft.com/en-us/library/ms536471(vs.85).aspx

MSXML documentation is here:
http://msdn.microsoft.com/en-us/library/ms763742(VS.85).aspx

If you need help writing JavaScript using MSXML to parse your XML
document then post the URL of the XML and tell us which elements and/or
attributes you want to read.

[Richard In Va.]

Post by Martin Honnen

Post by Richard In Va.
Would anyone know how I can fetch and read xml data to display in a html
file?
I'm building a local (unpublished) webpage to be a personal homepage on
my PC. When I open/refresh the html file, I would like it to fetch an
xml file type <?xml version="1.0" encoding="ISO-8859-1" ?> from the
internet and parse/read some of the data to display in the webpage using
standard html/ccs.

You could build a HTA (HTML application) on Windows and then use
JavaScript and MSXML to load and parse the XML document.
I suggest using a HTA instead of a normal web page as with normal web
pages rendered in a browser you are not allowed to access domains other
than the one your HTML document has been loaded from.
http://msdn.microsoft.com/en-us/library/ms536471(vs.85).aspx
http://msdn.microsoft.com/en-us/library/ms763742(VS.85).aspx
If you need help writing JavaScript using MSXML to parse your XML document
then post the URL of the XML and tell us which elements and/or attributes
you want to read.
--
Martin Honnen --- MVP XML
http://JavaScript.FAQTs.com/

Thanks Martin for your reply!

URL for XML file = http://xoap.weather.com/weather/local/23218?cc=&dayf=7

Elements / attributes I'm interested in...

<dnam>?</dnam>
<tm>?</tm>
<lsup>?</lsup>
<tmp>?</tmp>
<t>?</t>
<hmid>?</hmid>
<dayf>
<day d="?" day t="?" dt="?">
<hi>?</hi>
<lo>?</lo>
<part p="d">
<t>?</t>
<ppcp>?</ppcp>
<hmid>?</hmid>
</part>
</day>

<day d="1" t="?" dt="?">
etc....

"?" = the data I want to display in my homepage.

(same elements for day #0 thru day #6)

I was hoping that the xml file could be fetched from the web, then read from
cache avoiding the browser across domain issue. Also, don't know much about
writing scripts, but I have edited several for a custom fit. Never know,
later I may want to add-in or remove unused elements.

Thanks Martin for your reply... hope I'm not asking for too much. I briefly
looked at your HTA link and will do further reading, that might work well.

Thanks again!

Richard in VA.
+++++++++++

[Martin Honnen]

Post by Richard In Va.
URL for XML file = http://xoap.weather.com/weather/local/23218?cc=&dayf=7
Elements / attributes I'm interested in...
<dnam>?</dnam>
<tm>?</tm>

With MSXML you can use XPath to select nodes in an XML document so in an
HTA you could use JScript
var doc = new ActiveXObject('Msxml2.DOMDocument.3.0');
doc.async = false;
if (doc.load('http://xoap.weather.com/weather/local/23218?cc=&dayf=7'))
{
doc.setProperty('SelectionLanguage', 'XPath');
var locEl = doc.selectSingleNode('/wheather/loc');
var dnamEl = loc.selectSingleNode('dnam');
var dnam = dnamEl.text;
var tmEl = loc.selectSingleNode('tm');
var tm = tmEl.text;
// now you can use the string variables dnam and tm to insert the
// values in your HTML document
}
else
{
//deal with doc.parseError here
}

[Richard In Va.]

Post by Martin Honnen

Post by Richard In Va.
URL for XML file = http://xoap.weather.com/weather/local/23218?cc=&dayf=7
Elements / attributes I'm interested in...
<dnam>?</dnam>
<tm>?</tm>

With MSXML you can use XPath to select nodes in an XML document so in an
HTA you could use JScript
var doc = new ActiveXObject('Msxml2.DOMDocument.3.0');
doc.async = false;
if (doc.load('http://xoap.weather.com/weather/local/23218?cc=&dayf=7'))
{
doc.setProperty('SelectionLanguage', 'XPath');
var locEl = doc.selectSingleNode('/wheather/loc');
var dnamEl = loc.selectSingleNode('dnam');
var dnam = dnamEl.text;
var tmEl = loc.selectSingleNode('tm');
var tm = tmEl.text;
// now you can use the string variables dnam and tm to insert the
// values in your HTML document
}
else
{
//deal with doc.parseError here
}
--
Martin Honnen --- MVP XML
http://JavaScript.FAQTs.com/

Thanks again Martin,

Okay, I think I can follow that, but how do I single out the individual days
when...

<dayf>
<day d="0" t="Monday" dt="Sep 8">
<hi>90</hi>
<low>70</low>
<part p="d">
<t>Mostly Sunny</t>
<ppcp>20</ppcp>
<hmid>66</hmid>

I'll want the "Monday", <hi>, <low>, <t>, <ppcp> and <hmid> for each day
#0-6
If you can show me how to get the "Monday" and 1 element within day #0 I'll
figure the rest.

Your dealing with a learner here, so if you would, better show me an HTML
example of how to display the data in my webpage.

Thanks again Martin,

Richard in VA.
++++++++++++++++

[Martin Honnen]

Post by Richard In Va.
Okay, I think I can follow that, but how do I single out the individual days
when...
<dayf>
<day d="0" t="Monday" dt="Sep 8">
<hi>90</hi>
<low>70</low>
<part p="d">
<t>Mostly Sunny</t>
<ppcp>20</ppcp>
<hmid>66</hmid>
I'll want the "Monday", <hi>, <low>, <t>, <ppcp> and <hmid> for each day
#0-6
If you can show me how to get the "Monday" and 1 element within day #0 I'll
figure the rest.

You would access a node list of 'day' elements with
var dayElements = doc.selectNodes('/weather/dayf/day');
then you can loop through that list
for (var i = 0, l = dayElements.length; i < l; i++)
{
var dayElement = dayElements[i];
var dayName = dayElement.getAttribute('t'); // e.g. 'Monday'
var hiEl = dayElement.selectSingleNode('hi');
var hi = hiEl.text;
}

As for inserting data you get from the XML document into your HTML
document, you can do that by either preparing the HTML with elements to
take the data e.g. you would put a span
<span id="dnam"></span>
into your HTML document where you want to display that data, then you
could access that as
var dnamSpan = document.getElementById('dnam');
dnamSpan.innerText = dnam;
where dnma is the variable in my earlier post.
For the data of the days of the week you would probably use a HTML table
and populate that.
Or alternatively you could use DOM scripting to create all those HTML
dynamically.

XSLT is also a nice tool to transform XML to HTML, not sure if you would
want to try that.

[Richard In Va.]

Post by Martin Honnen

Post by Richard In Va.
Okay, I think I can follow that, but how do I single out the individual
days when...
<dayf>
<day d="0" t="Monday" dt="Sep 8">
<hi>90</hi>
<low>70</low>
<part p="d">
<t>Mostly Sunny</t>
<ppcp>20</ppcp>
<hmid>66</hmid>
I'll want the "Monday", <hi>, <low>, <t>, <ppcp> and <hmid> for each day
#0-6
If you can show me how to get the "Monday" and 1 element within day #0
I'll figure the rest.

You would access a node list of 'day' elements with
var dayElements = doc.selectNodes('/weather/dayf/day');
then you can loop through that list
for (var i = 0, l = dayElements.length; i < l; i++)
{
var dayElement = dayElements[i];
var dayName = dayElement.getAttribute('t'); // e.g. 'Monday'
var hiEl = dayElement.selectSingleNode('hi');
var hi = hiEl.text;
}
As for inserting data you get from the XML document into your HTML
document, you can do that by either preparing the HTML with elements to
take the data e.g. you would put a span
<span id="dnam"></span>
into your HTML document where you want to display that data, then you
could access that as
var dnamSpan = document.getElementById('dnam');
dnamSpan.innerText = dnam;
where dnma is the variable in my earlier post.
For the data of the days of the week you would probably use a HTML table
and populate that.
Or alternatively you could use DOM scripting to create all those HTML
dynamically.
XSLT is also a nice tool to transform XML to HTML, not sure if you would
want to try that.
--
Martin Honnen --- MVP XML
http://JavaScript.FAQTs.com/

Once again...Thanks Martin,

So your suggesting I do this...

<html>
<title></title>
<head></head>
<body>

<script language="JavaScript">

var doc = new ActiveXObject('Msxml2.DOMDocument.3.0');
doc.async = false;
if (doc.load('http://xoap.weather.com/weather/local/23218?cc=&dayf=7'))

{
doc.setProperty('SelectionLanguage', 'XPath');
var locEl = doc.selectSingleNode('/wheather/loc');
var dnamEl = loc.selectSingleNode('dnam');
var dnam = dnamEl.text;
var tmEl = loc.selectSingleNode('tm');
var tm = tmEl.text;
}
else
{
//deal with doc.parseError here
}
</script>

<table>
<tr>
<td><span id="dnam"></span></td> <!-- location of weather
bservation -->
<td><span id="tm"></span></td> <!-- time of obsrvation -->
</tr>
</table>

<!-- misc html content here -->

<script language="JavaScript">

var dayElements = doc.selectNodes('/weather/dayf/day');
for (var i = 0, l = dayElements.length; i < l; i++)
{
var dayElement = dayElements[i];
var dayName = dayElement.getAttribute('t'); // e.g. 'Monday'
var hiEl = dayElement.selectSingleNode('hi');
var hi = hiEl.text;
}
</script>

<!-- Display Day 0 -->
<table>
<tr>
<td><span id="t"></span></td> <!-- condition e.g. mostly sunny -->
<td><span id="hi"></span></td> <!-- day 0 forecast high -->
</tr>
</table>

<script language="JavaScript">

var dayElements = doc.selectNodes('/weather/dayf/day');
for (var i = 0, l = dayElements.length; i < l; i++)
{
var dayElement = dayElements[i];
var dayName = dayElement.getAttribute('t'); // e.g. 'Monday'
var hiEl = dayElement.selectSingleNode('hi');
var hi = hiEl.text;
}
</script>

<!-- Display Day 1 -->
<table>
<tr>
<td><span id="t"></span></td> <!-- condition e.g. mostly sunny -->
<td><span id="hi"></span></td> <!-- day 1 forecast high -->
</tr>
</table>

<!-- misc html content here -->

</body>
</html>
<!-- save files as HTA -->

Coffeecup reports an error on line #15... var dnamEl =
loc.selectSingleNode('dnam');
as "loc" being undefined... then nothing happens.

As you can see, I'm probably completely lost, but I wonder if DOM scripting
would make things more simple for me.
And with HTA, I loose the browser toolbar and tabed browsing that I would
have with a HTML file.

Thanks Martin,

Richard in VA.
+++++++++++

[Martin Honnen]

Post by Richard In Va.
So your suggesting I do this...
<html>
<title></title>
<head></head>
<body>
<script language="JavaScript">

I would put (all) the code to load and parse the XML into a function and
call that function in the onload handler e.g.
function loadXml (url)
{
var doc = ...;
...
}
window.onload = function () {
loadXml('http://xoap.weather.com/weather/local/23218?cc=&dayf=7');
};

Post by Richard In Va.
var doc = new ActiveXObject('Msxml2.DOMDocument.3.0');
doc.async = false;
if (doc.load('http://xoap.weather.com/weather/local/23218?cc=&dayf=7'))
{
doc.setProperty('SelectionLanguage', 'XPath');
var locEl = doc.selectSingleNode('/wheather/loc');

^^^^^^^^^
The word and element name is spelled 'weather' not 'wheater'. Sorry that
I misspelled that in my earlier post.

Post by Richard In Va.
As you can see, I'm probably completely lost, but I wonder if DOM scripting
would make things more simple for me.

I think the problem is just the misspelled element name, other than that
you are doing fine. Only if you have data for seven days of the week
then you need to make sure you have seven rows in your table and
different ids for those elements.

Post by Richard In Va.
And with HTA, I loose the browser toolbar and tabed browsing that I would
have with a HTML file.

If you want to use the browser IE and not a HTA then you need to check
whether you can put the site you want to use into the trusted sites zone
of IE and enable the access across domains for that zone.

[Richard In Va.]

Post by Martin Honnen

Post by Richard In Va.
So your suggesting I do this...
<html>
<title></title>
<head></head>
<body>
<script language="JavaScript">

I would put (all) the code to load and parse the XML into a function and
call that function in the onload handler e.g.
function loadXml (url)
{
var doc = ...;
...
}
window.onload = function () {
loadXml('http://xoap.weather.com/weather/local/23218?cc=&dayf=7');
};

Post by Richard In Va.
var doc = new ActiveXObject('Msxml2.DOMDocument.3.0');
doc.async = false;
if
(doc.load('http://xoap.weather.com/weather/local/23218?cc=&dayf=7'))
{
doc.setProperty('SelectionLanguage', 'XPath');
var locEl = doc.selectSingleNode('/wheather/loc');

^^^^^^^^^
The word and element name is spelled 'weather' not 'wheater'. Sorry that I
misspelled that in my earlier post.

Post by Richard In Va.
As you can see, I'm probably completely lost, but I wonder if DOM
scripting would make things more simple for me.

I think the problem is just the misspelled element name, other than that
you are doing fine. Only if you have data for seven days of the week then
you need to make sure you have seven rows in your table and different ids
for those elements.

Post by Richard In Va.
And with HTA, I loose the browser toolbar and tabed browsing that I would
have with a HTML file.

If you want to use the browser IE and not a HTA then you need to check
whether you can put the site you want to use into the trusted sites zone
of IE and enable the access across domains for that zone.
--
Martin Honnen --- MVP XML
http://JavaScript.FAQTs.com/

Martin, so your suggesting these edits...
------------------------

<html>
<title></title>
<head></head>
<body>

<script language="JavaScript">

function loadXml (url)
{
var doc = new ActiveXObject('Msxml2.DOMDocument.3.0');
doc.async = false;
}
window.onload = function ()
{
loadXml('http://xoap.weather.com/weather/local/23218?cc=&dayf=7');
};
{
doc.setProperty('SelectionLanguage', 'XPath');
var locEl = doc.selectSingleNode('/weather/loc');
var dnamEl = loc.selectSingleNode('dnam');
var dnam = dnamEl.text;
var tmEl = loc.selectSingleNode('tm');
var tm = tmEl.text;
}
var dayElements = doc.selectNodes('/weather/dayf/day');
for (var i = 0, l = dayElements.length; i < l; i++)
{
var dayElement = dayElements[i];
var dayName = dayElement.getAttribute('t'); // e.g. 'Monday'
var hiEl = dayElement.selectSingleNode('hi');
var hi = hiEl.text;
}
else
{
//deal with doc.parseError here
}
</script>

<table>
<tr>
<td><span id="dnam"></span></td> <!-- location of observation -->
<td><span id="tm"></span></td> <!-- time of observation -->
</tr>
</table>

<!-- misc html content here -->

<!-- Display Day 0 -->
<table>
<tr>
<td><span id="dayName"></span></td> <!-- day of week -->
<td><span id="t"></span></td> <!-- condition e.g. mostly sunny -->
<td><span id="hi"></span></td> <!-- day #0 forecast high temp -->
</tr>
</table>

<!-- misc html content here -->

<!-- Display Day 1 -->
<table>
<tr>
<td><span id="dayName"></span></td> <!-- day of week -->
<td><span id="t"></span></td> <!-- condition e.g. mostly sunny -->
<td><span id="hi"></span></td> <!-- day 1 forecast high -->
</tr>
</table>

<!-- Continue Tables for Days #2-6 (7 total days) -->

<!-- misc html content here -->

</body>
</html>
<!-- save file as HTA -->

-----------------------------------

Martin, is this more closer to what your talking about? I'm still confused
but maybe rightfully so, this is somewhat new to me.
Haven't quite figured out what the results of the loop will be, I suppose
the loop will yield "day name" and "hi temp" till it runs out of days?

CoffeeCup HTML editor shows the URL as "remarked out" due to the double //
as with...
loadXml('http://xoap.weather.com/weather/local/23218?cc=&dayf=7')

I can't get the code to execute, keep getting script errors when I open the
HTA file.

Also, I wonder if there is a way to do this with a list index (or something)
and assign a variable name to each item in the index. Every parent/child
element text content gets added to the index. The index could start with 1
and end up where ever it does. (just thinking out loud here)

Thanks once again Martin!
Richard in VA.
++++++++++++++++++++

[Martin Honnen]

Post by Richard In Va.
<html>
<title></title>
<head></head>

No, that is not proper HTML, the title element belongs inside of the
head element and it is good practice to put script elements there too so use
<html>
<head>
<title>...</title>
<script type="text/javascript">
function loadXml (url)
{
// all code of that function goes here
var doc = new ActiveXObject('Msxml2.DOMDocument.3.0');
doc.async = false;
if (doc.load(url))
{
doc.setProperty('SelectionLanguage', 'XPath');
var locEl = doc.selectSingleNode('/weather/loc');
var dnamEl = loc.selectSingleNode('dnam');
var dnam = dnamEl.text;
document.getElementById('dnam').innerText = dnam;
var tmEl = loc.selectSingleNode('tm');
var tm = tmEl.text;
document.getElementById('tm').innerText = tm;
}

}

window.onload = function ()
{
loadXml('http://xoap.weather.com/weather/local/23218?cc=&dayf=7');
};
</script>
</head>
<body>
<table>
<tr>
<td><span id="dnam"></span></td> <!-- location of observation -->
<td><span id="tm"></span></td> <!-- time of observation -->
</tr>
</table>
</body>
</html>

Post by Richard In Va.
<!-- Display Day 0 -->
<table>
<tr>
<td><span id="dayName"></span></td> <!-- day of week -->
<td><span id="t"></span></td> <!-- condition e.g. mostly sunny -->
<td><span id="hi"></span></td> <!-- day #0 forecast high temp -->
</tr>
</table>

As I said, the id must be unique so use e.g.
<span id="dayName0"></span>
<span id="t0"></span>
and so on.

[Richard In Va.]

Hello Martin,

Sorry about the location I had for <title>...</title>, oversight on my part
there!
I tried your code suggestion and I'm sorry but I keep getting a script
error, var "loc" is undefined in the line...

var dnamEl = loc.selectSingleNode('dnam');

I tried to resolve the error on my own without much luck. But in an earlier
reply (your reply #3, post #6) you suggested I might try using DOM scripting
or XSLT as a method. Went to w3schools.com and read up on XML DOM
http://www.w3schools.com/dom/default.asp , took their tutorial example and
was able to get it to work for my weather.

This is what I've come up with (loading the xml file from my local drive)...

<html>
<head>
<title>23218 XML-DOM v2</title>
</head>
<body>

<script type="text/javascript">
try //Internet Explorer
{
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
}
catch(e)
{
try //Firefox, Mozilla, Opera, etc.
{
xmlDoc=document.implementation.createDocument("","",null);
}
catch(e) {alert(e.message)}
}
try
{
xmlDoc.async=false;
xmlDoc.load("23218.xml");
document.write("xmlDoc is loaded, ready for use");
}
catch(e) {alert(e.message)}
</script><br /><br />


<script type="text/javascript">
var d0hi = (xmlDoc.getElementsByTagName("hi")[0].childNodes[0].nodeValue);
var d0lo = (xmlDoc.getElementsByTagName("low")[0].childNodes[0].nodeValue);
var d0cond = (xmlDoc.getElementsByTagName("t")[4].childNodes[0].nodeValue);
var d0prec =
(xmlDoc.getElementsByTagName("ppcp")[0].childNodes[0].nodeValue);

var d1hi = (xmlDoc.getElementsByTagName("hi")[1].childNodes[0].nodeValue);
var d1lo = (xmlDoc.getElementsByTagName("low")[1].childNodes[0].nodeValue);
var d1cond = (xmlDoc.getElementsByTagName("t")[8].childNodes[0].nodeValue);
var d1prec =
(xmlDoc.getElementsByTagName("ppcp")[2].childNodes[0].nodeValue);
</script>

<table border ="1">

<tr>
<td>Day #0 Forecast :</td>
<td><script type="text/javascript">document.write(d0hi)</script>&deg;&frasl;
<script type="text/javascript">document.write(d0lo)</script>&deg;</td>
<td><script type="text/javascript">document.write(d0cond)</script></td>
<td><script type="text/javascript">document.write(d0prec)</script>&#37;</td>
</tr>

<tr>
<td>Day #1 Forecast :</td>
<td><script type="text/javascript">document.write(d1hi)</script>&deg;&frasl;
<script
type="text/javascript">document.write(d1lo)</script>&deg;</td>
<td><script type="text/javascript">document.write(d1cond)</script></td>
<td><script type="text/javascript">document.write(d1prec)</script>&#37;</td>
</tr>

</table>
</body>
</html>

This will output to screen the high/low temps, condition and precip% for day
#0 and #1.
This seems to work fairly well but I can't figure how to get the weekday as
in "Monday". You mentioned about the weekday earlier, but I'm not able to
work that out for some reason.

Loading the XML file locally is an effort to keep things in HTML for now and
just getting things to work. (Maybe later I can find a way to have the html
file call an external script to download the xml file upon page
load/refresh?

Using this approach, I'm having to count each occurrence of <hi>, <low>, <t>
and <ppcp> but it's not all that bad.

Using "document.write" seems alittle awkward, couldn't figure out how to
apply <span>...</span> either.

Anyway, your opinion on this method (XML DOM) would be most appreciated...
and if you can help me fix the weekday, I'll add you to my Christmas
shopping list...

Ref: http://xoap.weather.com/weather/local/23218?cc=&dayf=7 for the xml
file.


Thanks again Martin and sorry for all the trouble!

Richard in VA.
+++++++++++

Post by Richard In Va.
<html>
<title></title>
<head></head>

No, that is not proper HTML, the title element belongs inside of the head
element and it is good practice to put script elements there too so use
<html>
<head>
<title>...</title>
<script type="text/javascript">
function loadXml (url)
{
// all code of that function goes here
var doc = new ActiveXObject('Msxml2.DOMDocument.3.0');
doc.async = false;
if (doc.load(url))
{
doc.setProperty('SelectionLanguage', 'XPath');
var locEl = doc.selectSingleNode('/weather/loc');
var dnamEl = loc.selectSingleNode('dnam');
var dnam = dnamEl.text;
document.getElementById('dnam').innerText = dnam;
var tmEl = loc.selectSingleNode('tm');
var tm = tmEl.text;
document.getElementById('tm').innerText = tm;
}
}
window.onload = function ()
{
loadXml('http://xoap.weather.com/weather/local/23218?cc=&dayf=7');
};
</script>
</head>
<body>
<table>
<tr>
<td><span id="dnam"></span></td> <!-- location of observation -->
<td><span id="tm"></span></td> <!-- time of observation -->
</tr>
</table>
</body>
</html>

Post by Richard In Va.
<!-- Display Day 0 -->
<table>
<tr>
<td><span id="dayName"></span></td> <!-- day of week -->
<td><span id="t"></span></td> <!-- condition e.g. mostly sunny -->
<td><span id="hi"></span></td> <!-- day #0 forecast high temp -->
</tr>
</table>

As I said, the id must be unique so use e.g.
<span id="dayName0"></span>
<span id="t0"></span>
and so on.
--
Martin Honnen --- MVP XML
http://JavaScript.FAQTs.com/

[Richard In Va.]

Think I may have just found it...

var d0day = xmlDoc.getElementsByTagName("day")[0].getAttribute("t");
will save the day name (Wednesday) to var d0day

<td><script type="text/javascript">document.write(d0day)</script></td>
will display "Wednesday" in the html table

(file saved as html)

Now if I can figure out how to get <span>..</span> to work instead of using
"document.write".
And maybe an automatic way to DL the xml file to C:\ upon html page
load/refresh I think I'll have it.
(or maybe an html "forecast update" button to DL the xml file to refresh the
forecast)

Richard in VA.
+++++++++++

Post by Richard In Va.
Hello Martin,
Sorry about the location I had for <title>...</title>, oversight on my
part there!
I tried your code suggestion and I'm sorry but I keep getting a script
error, var "loc" is undefined in the line...
var dnamEl = loc.selectSingleNode('dnam');
I tried to resolve the error on my own without much luck. But in an
earlier reply (your reply #3, post #6) you suggested I might try using DOM
scripting or XSLT as a method. Went to w3schools.com and read up on XML
DOM http://www.w3schools.com/dom/default.asp , took their tutorial example
and was able to get it to work for my weather.
This is what I've come up with (loading the xml file from my local drive)...
<html>
<head>
<title>23218 XML-DOM v2</title>
</head>
<body>
<script type="text/javascript">
try //Internet Explorer
{
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
}
catch(e)
{
try //Firefox, Mozilla, Opera, etc.
{
xmlDoc=document.implementation.createDocument("","",null);
}
catch(e) {alert(e.message)}
}
try
{
xmlDoc.async=false;
xmlDoc.load("23218.xml");
document.write("xmlDoc is loaded, ready for use");
}
catch(e) {alert(e.message)}
</script><br /><br />
<script type="text/javascript">
var d0hi = (xmlDoc.getElementsByTagName("hi")[0].childNodes[0].nodeValue);
var d0lo =
(xmlDoc.getElementsByTagName("low")[0].childNodes[0].nodeValue);
var d0cond =
(xmlDoc.getElementsByTagName("t")[4].childNodes[0].nodeValue);
var d0prec =
(xmlDoc.getElementsByTagName("ppcp")[0].childNodes[0].nodeValue);
var d1hi = (xmlDoc.getElementsByTagName("hi")[1].childNodes[0].nodeValue);
var d1lo =
(xmlDoc.getElementsByTagName("low")[1].childNodes[0].nodeValue);
var d1cond =
(xmlDoc.getElementsByTagName("t")[8].childNodes[0].nodeValue);
var d1prec =
(xmlDoc.getElementsByTagName("ppcp")[2].childNodes[0].nodeValue);
</script>
<table border ="1">
<tr>
<td>Day #0 Forecast :</td>
<td><script
type="text/javascript">document.write(d0hi)</script>&deg;&frasl;
<script
type="text/javascript">document.write(d0lo)</script>&deg;</td>
<td><script type="text/javascript">document.write(d0cond)</script></td>
<td><script
type="text/javascript">document.write(d0prec)</script>&#37;</td>
</tr>
<tr>
<td>Day #1 Forecast :</td>
<td><script
type="text/javascript">document.write(d1hi)</script>&deg;&frasl;
<script
type="text/javascript">document.write(d1lo)</script>&deg;</td>
<td><script type="text/javascript">document.write(d1cond)</script></td>
<td><script
type="text/javascript">document.write(d1prec)</script>&#37;</td>
</tr>
</table>
</body>
</html>
This will output to screen the high/low temps, condition and precip% for
day #0 and #1.
This seems to work fairly well but I can't figure how to get the weekday
as in "Monday". You mentioned about the weekday earlier, but I'm not able
to work that out for some reason.
Loading the XML file locally is an effort to keep things in HTML for now
and just getting things to work. (Maybe later I can find a way to have the
html file call an external script to download the xml file upon page
load/refresh?
Using this approach, I'm having to count each occurrence of <hi>, <low>,
<t> and <ppcp> but it's not all that bad.
Using "document.write" seems alittle awkward, couldn't figure out how to
apply <span>...</span> either.
Anyway, your opinion on this method (XML DOM) would be most appreciated...
and if you can help me fix the weekday, I'll add you to my Christmas
shopping list...
Ref: http://xoap.weather.com/weather/local/23218?cc=&dayf=7 for the xml
file.
Thanks again Martin and sorry for all the trouble!
Richard in VA.
+++++++++++

Post by Richard In Va.
<html>
<title></title>
<head></head>

No, that is not proper HTML, the title element belongs inside of the head
element and it is good practice to put script elements there too so use
<html>
<head>
<title>...</title>
<script type="text/javascript">
function loadXml (url)
{
// all code of that function goes here
var doc = new ActiveXObject('Msxml2.DOMDocument.3.0');
doc.async = false;
if (doc.load(url))
{
doc.setProperty('SelectionLanguage', 'XPath');
var locEl = doc.selectSingleNode('/weather/loc');
var dnamEl = loc.selectSingleNode('dnam');
var dnam = dnamEl.text;
document.getElementById('dnam').innerText = dnam;
var tmEl = loc.selectSingleNode('tm');
var tm = tmEl.text;
document.getElementById('tm').innerText = tm;
}
}
window.onload = function ()
{
loadXml('http://xoap.weather.com/weather/local/23218?cc=&dayf=7');
};
</script>
</head>
<body>
<table>
<tr>
<td><span id="dnam"></span></td> <!-- location of observation -->
<td><span id="tm"></span></td> <!-- time of observation -->
</tr>
</table>
</body>
</html>

Post by Richard In Va.
<!-- Display Day 0 -->
<table>
<tr>
<td><span id="dayName"></span></td> <!-- day of week -->
<td><span id="t"></span></td> <!-- condition e.g. mostly sunny -->
<td><span id="hi"></span></td> <!-- day #0 forecast high temp -->
</tr>
</table>

As I said, the id must be unique so use e.g.
<span id="dayName0"></span>
<span id="t0"></span>
and so on.
--
Martin Honnen --- MVP XML
http://JavaScript.FAQTs.com/