Fetch & Read XML Data into HTML File?

This is a discussion on Fetch & Read XML Data into HTML File? within the XML SOAP forums in Framework and Interface Programming category; 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 ...

Go Back   Application Development Forum > Framework and Interface Programming > XML SOAP

Object Mix

Register FAQ Calendar Search Today's Posts Mark Forums Read
  #1  
Old 09-08-2008, 08:58 AM
Richard In Va.
Guest
 
Default Fetch & Read XML Data into HTML File?

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.
+++++++++++






Reply With Quote
  #2  
Old 09-08-2008, 09:08 AM
Martin Honnen
Guest
 
Default Re: Fetch & Read XML Data into HTML File?

Richard In Va. wrote:
> 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/libr...71(vs.85).aspx

MSXML documentation is here:
http://msdn.microsoft.com/en-us/libr...42(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/
Reply With Quote
  #3  
Old 09-08-2008, 10:04 AM
Richard In Va.
Guest
 
Default Re: Fetch & Read XML Data into HTML File?


"Martin Honnen" <mahotrash@yahoo.de> wrote in message
news:%23kLUDQbEJHA.2292@TK2MSFTNGP04.phx.gbl...
> Richard In Va. wrote:
>> 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/libr...71(vs.85).aspx
>
> MSXML documentation is here:
> http://msdn.microsoft.com/en-us/libr...42(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.
+++++++++++

















Reply With Quote
  #4  
Old 09-08-2008, 10:23 AM
Martin Honnen
Guest
 
Default Re: Fetch & Read XML Data into HTML File?

Richard In Va. wrote:

> 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/
Reply With Quote
  #5  
Old 09-08-2008, 11:23 AM
Richard In Va.
Guest
 
Default Re: Fetch & Read XML Data into HTML File?


"Martin Honnen" <mahotrash@yahoo.de> wrote in message
news:u3S245bEJHA.4104@TK2MSFTNGP04.phx.gbl...
> Richard In Va. wrote:
>
>> 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.
++++++++++++++++






Reply With Quote
  #6  
Old 09-08-2008, 12:56 PM
Martin Honnen
Guest
 
Default Re: Fetch & Read XML Data into HTML File?

Richard In Va. wrote:

> 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/
Reply With Quote
  #7  
Old 09-08-2008, 03:26 PM
Richard In Va.
Guest
 
Default Re: Fetch & Read XML Data into HTML File?


"Martin Honnen" <mahotrash@yahoo.de> wrote in message
news:u62sOPdEJHA.3476@TK2MSFTNGP02.phx.gbl...
> Richard In Va. wrote:
>
>> 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.
+++++++++++







Reply With Quote
  #8  
Old 09-09-2008, 06:39 AM
Martin Honnen
Guest
 
Default Re: Fetch & Read XML Data into HTML File?

Richard In Va. wrote:

> 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');
};

> 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.



> 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.

> 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/
Reply With Quote
  #9  
Old 09-09-2008, 11:12 AM
Richard In Va.
Guest
 
Default Re: Fetch & Read XML Data into HTML File?


"Martin Honnen" <mahotrash@yahoo.de> wrote in message
news:uW%23OnhmEJHA.1460@TK2MSFTNGP03.phx.gbl...
> Richard In Va. wrote:
>
>> 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');
> };
>
>> 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.
>
>
>
>> 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.
>
>> 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.
++++++++++++++++++++




Reply With Quote
  #10  
Old 09-09-2008, 11:36 AM
Martin Honnen
Guest
 
Default Re: Fetch & Read XML Data into HTML File?

Richard In Va. wrote:

> <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>

> <!-- 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/
Reply With Quote
Reply


Thread Tools
Display Modes


All times are GMT -5. The time now is 09:06 PM.


Powered by vBulletin® Version 3.7.2
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.2.0
vB Ad Management by =RedTyger=

In an effort to better serve ads to our visitors, cookies are used on objectmix.com. For more information, check out our Privacy Policy.