I had hard time to work with API, but finally I could figure out how to play with API ! Today’s review class was so much helpful to do this work. I’ve learned how to bring live information from API from Weather Underground by looking at its json datas and apply them to my website. Especially, bring live Radar+Satellite Map was so interesting ! I will definitely use API in my future project.
This is my website!
http://a.parsons.edu/~parks566/apiExplore/apiExplore.html
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>JSON WITH API</title>
<script type=”text/javascript” src=”js/jquery-1.10.2.min.js”></script>
<script type=”text/javascript”>
/*Standard request URL format =
http://api.wunderground.com/api/b79e3040f6431025/features/settings/q/query.format
where
features=> type of data, here astronomy
settings=> lang or personal data
query=> location of data
*/
$(document).ready(function(){
$.ajax({
url: “http://api.wunderground.com/api/3b6709cb1560b9d9/conditions/q/NY/New_York.json”,
dataType : “jsonp”, //jsonp for cross-origin files
success : function(parsed_json) {
console.log(‘success!!’);
//each nested object goes in []
var Odata = parsed_json[‘current_observation’][‘display_location’][‘full’];
var Otime = parsed_json[‘current_observation’][‘observation_time’];
var weatherD = parsed_json[‘current_observation’][‘weather’];
var temperatureS = parsed_json[‘current_observation’][‘temperature_string’];
var humidityD = parsed_json[‘current_observation’][‘relative_humidity’];
var forecastU = parsed_json[‘current_observation’][‘forecast_url’];
var imageR = “http://api.wunderground.com/api/3b6709cb1560b9d9/animatedradar/animatedsatellite/q/NY/New_York.gif?num=6&delay=50&interval=30”;
//var sunset = parsed_json[‘moon_phase’][‘sunset’][‘hour’];
console.log(“observation_location : “+ Odata);
console.log(“observation_time : “+ Otime);
console.log(“weather : “+ weatherD);
console.log(“temperature : “+ temperatureS);
console.log(“humidity : “+ humidityD);
console.log(“forecast url : “+ forecastU);
console.log(“image: “+ imageR);
//console.log(parsed_json); //great debugging tool here!
$(“#container”).append(“<h1> Weather in “+ Odata +” </h1>”);
$(“#container”).append(“<img src=\””+ imageR +”\” width=\”500\” height=\”500\” >”);
$(“#container”).append(“<p> Time : “+ Otime +” </p>”);
$(“#container”).append(“<p> Weather : “+ weatherD +” </p>”);
$(“#container”).append(“<p> Temperature : “+ temperatureS +” </p>”);
$(“#container”).append(“<p> Humidity : “+ humidityD +” </p>”);
$(“#container”).append(“<p> See More Detail : <a href = \””+ forecastU +”\”>”+forecastU+”</a></p>”);
} //end of success
}); //end of ajax
}); //end of doc ready{
</script>
</head>
<body>
<section id=”container”>
</section>
</body>
</html>
Creative Computation Lab, Fall 2013 
