NOAA Weather.gov XML Parsing Using jQuery

I wanted to add a small weather icon on our intranet that wasn’t branded with Weather.com or accuweather or any other weather site. Luckly NOAA, whose site is weather.gov, has a free XML source so I could use that to read the weather. Using jQuery I parsed their complicated file for the current conditions temperature and icon. Then I update my div and img src and it’s done. There doesn’t seem to be to many people using it as I couldn’t find any help parsing the NOAA file. So there was a lot of trial and error.

Update the url property and then call getWeather() and it will do the rest. Here’s the code. Enjoy!

function getWeather(){
    	$(document).ready(function(){
    		jQuery.support.cors = true; //enables cross domain support
			$.ajax({
				type: "GET",
				url: "http://forecast.weather.gov/MapClick.php?lat=32.82564&lon=-117.1558867&unit=0&lg=english&FcstType=dwml",
				dataType: "xml",
				success: function(xml) {
				  $(xml).find('data').each(function(){
			            // current document tag
			            var Document = $(this);
			            var temp;
			            
			            // make sure you have the correct data type.
			            var n1 = Document.attr('type');			            	
			            if(n1=='current observations'){
			            	//the correct icon-link
			            	var iconLink = Document.find('icon-link').text();

			            	var n2 = Document.find("temperature").attr("type");
			            	//finds the correct one and only retreives the first value.
			            	if(n2=='apparent'){temp = $(this).find('value').first().text();};
			            		
			            	//set it in the DOM
			            	$("#weather-icon").attr("src",iconLink );
			            	$("#weather").prepend("<span class='temp'>"+temp+"°</span>");
			            }
			        });
				}
			});
			//refresh weather every 30 minutes if page is refreshed by browse action.
			setInterval(function(){getWeather();},1800000);
		});
    }