如何将XML标记的值获取到HTML页面中

Question

I need to display the local weather in a PowerPoint slideshow (which updates itself regularely without human interaction). I have in mind to create a local html file that loads the data from the web and displays that in lateron in the ppt.

This is how the XML looks like (I load that from http://api.openweathermap.org/data/2.5/weather?q=Basel&mode=xml&units=metric)

<?xml version="1.0" encoding="UTF-8"?>
<current>
  <city id="2661604" name="Basel">
    <coord lon="7.57" lat="47.56"/>
    <country>CH</country>
    <sun rise="2014-04-30T04:13:21" set="2014-04-30T18:40:25"/>
  </city>
  <temperature value="12" min="12" max="12" unit="celsius"/>
  <humidity value="76" unit="%"/>
  <pressure value="1012" unit="hPa"/>
  <wind>
    <speed value="4.1" name="Gentle Breeze"/>
    <direction value="280" code="W" name="West"/>
  </wind>
  <clouds value="75" name="broken clouds"/>
  <precipitation value="1" mode="rain" unit="3h"/>
  <weather number="803" value="broken clouds" icon="04d"/>
  <lastupdate value="2014-04-30T11:00:00"/>
</current>

How do I now get the values from these tags into my html file?

I need it to be something like this:

• Temperature: 12°C (I need the 12 from <temperature value="">
• Weather icon from URL: http://openweathermap.org/img/w/04d.png (the url is static exept the 04d comes from the XML)
• Sun rise: 6.13 am (<sun rise=""> +2 in summertime and +1 in wintertime)
• Sun set: 8.40 pm (same as above)
• last update: xxx

There is also a JSON version of the API (http://api.openweathermap.org/data/2.5/weather?q=Basel&mode=json&units=metric) and I would take whichever I get to work the fastest.

Also I would run it on our local windows XP machine (so no php available) but it it would only work with php I could get that to work easily.

Thanks for any help.

Answer 1

You can use javascript/ jQuery. Add <div id="xml-data"></div> and code bellow on your html page. Hope I help.

<script>
jQuery(document).ready(function(){
    jQuery.ajax({
            type: "GET", 
            url: "http://api.openweathermap.org/data/2.5/weather?q=Basel&mode=xml&units=metric", 
            dataType: "xml", 
            success: function(xml) { 

            jQuery(xml).find('current').each(
                    function()
                    {
                      var city_name = jQuery(this).find('city').attr('name'),
                      country = jQuery(this).find('country').text(),
                      temperature = jQuery(this).find('temperature').attr('value');

                     jQuery('<div class="items"></div>').html('<h2>'
                      +city_name+'</h2><p>'
                      +country+'</p><p>'
                      +temperature+'</p>').appendTo('#xml-data');

                    });                 
            }
    });
});
</script>