Creat Javascript or .Net or Php scrip that can parse xml link and display an image

I am not sure the best way to do this, but bascially what i want is to build a small weather widget for my personal website.

I have downloaded some nice weather icons, however i would like to display them depending on the current weather.  

One option is to use the API, however since I live in Hong Kong, i want to use the data from The Hong Kong observatory XML feed.

They do no have a API, but they provide a rss feed, located here :

I would like to be able to pick out words based on the rss feed and then display a image based on those words..

Any idea?

Who is Participating?
Michel PlungjanIT ExpertCommented:

<script type="text/javascript" src=""></script>
<!-- Load RSS Through Google as JSONP -->

{"responseData": {"feed":{"feedUrl":"","title":"Local Weather Forecast","link":"","author":"","description":"Local Weather Forecast","type":"rss20","entries":[{"title":"Bulletin updated at 13:45 HKT 23/12/2011","link":"","author":"Hong Kong Observatory","publishedDate":"Thu, 22 Dec 2011 21:45:00 -0800","contentSnippet":"The winter monsoon is bringing cold weather to inland Guangdong. Locally, temperatures over the territory this morning were ...","content":"The winter monsoon is bringing cold weather to inland Guangdong. Locally, temperatures over the territory this morning were generally 3 to 5 degrees lower than those of yesterday.\u003cbr\u003e\u003cbr\u003e\n\t\t\t\t\t\t\t\t\t\tWeather forecast for this afternoon and tonight:\u003cbr\u003eFine and dry. Hazy at first. It will be cold overnight. Moderate northerly winds, becoming fresh gradually, occasionally strong offshore overnight.\u003cbr\u003e\u003cbr\u003e\n\t\t\t\t\tOutlook: Fine and very dry in the next few days. It will be cold with temperature below 12 degrees in the mornings.","categories":["F"]}]}}, "responseDetails": null, "responseStatus": 200}
<script type="text/javascript">

  function displayWeatherReport (feedResponse) {
   var feed = feedResponse.responseData.feed;

   var feedTitle = feed["title"];

   var data = feed.entries[0];
   var publishedDate = data.publishedDate.substring(0,17);
   var title = data.title;
   var text = data.content;

//   for (var o in data) text += '<br>'+o+':'+data[o]

    // Get weather report content strings
    var html = '<h3>'+feedTitle+'</h3>'
    html += '<h4>'+title+'</h4>'
    html += '<p>'+text+'</p>'
    if (text.indexOf('rain')!=-1) html += '<img src="rain.gif" alt="rain" />';


  var RSSFeed = "";
  var URL = '' + encodeURIComponent(RSSFeed)+'&callback=displayWeatherReport';

    $(document).ready(function() {
       var scr = document.createElement("script");
       scr.src = URL;


Open in new window

Michel PlungjanIT ExpertCommented:
You need serverside.

Here is an example:

$rss = file_get_contents('');

echo $rss;
if (stristr($rss,"rain")) echo '<img src="rain.gif" />';

Open in new window

Ricky11Author Commented:
Thanks, Unfortunately I found out my webhost ( only allows HTML, CSS, and Javascript

Anyway to do it in java script?

Ricky11Author Commented:
Thanks , that looks like it works. last thing how would i format it, as now it runs of the page.

Can i apply some code to test the feed and display a certain image based on key words?
Michel PlungjanIT ExpertCommented:
You cannot format the text but I put in a test for rain
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.