In need of assistance with Yahoo Weather API
Question
I am having a hard time using the Yahoo API for a Weather Application. I am trying to make it show weather information, for small scale testing, just the wind chill.
index.html
<head>
<title>Alex Webber - MyWeather</title>
<script language="javascript" type="text/javascript" src="js/weather"> </script>
</head>
<body>
<p id="demo"><script>weather();</script></p>
</body>
weather.js
function weather(){
var callbackFunction = function(data) {
var wind = data.query.results.channel.wind;
document.getElementById("demo").innerHTML = wind.chill;
};
}
1 answers
solution1
0 2015-03-21 08:51:00
You have to call the QUERY to the yahoo weather api, you seem to have left that out. The query is now set to * so that it can return other data besides wind. Plus a variable var location is assigned into the query to cover all regions. Use the state name for areas in the USA ex. new york in the city box, ny in the country box.
<!DOCTYPE html>
<html>
<head>
<script>
function getLocation() {
var city = document.getElementById("city").value;
var country = document.getElementById("country").value;
var location = city + "," + country;
//create a script and add it to your page
var script = document.createElement('script');
script.src = "https://query.yahooapis.com/v1/public/yql?q=select * from weather.forecast where woeid in (select woeid from geo.places(1) where text='" + location + "')&format=json&callback=callbackFunction";
document.getElementsByTagName('head')[0].appendChild(script);
}
var callbackFunction = function(data) {
var wind = data.query.results.channel.wind;
var wind_chill = wind.chill;
var wind_speed = wind.speed;
var wind_direction = wind.direction
document.getElementById("chill").innerHTML = wind_chill;
document.getElementById("speed").innerHTML = wind_speed;
document.getElementById("direction").innerHTML = wind_direction;
//alert(wind.chill);
}
</script>
</head>
<body>
City:<input type="text" id="city">
Country/State in U.S.A<input type="text" id="country">
<input type="button" onclick="getLocation()" value="Get Weather">
<p>Wind Chill</p>
<p id="chill"></p>
<p>Wind Speed</p>
<p id="speed"></p>
<p>Wind Direction</p>
<p id="direction"></p>
</body>
</html>
Contributor Brian Glaz helped me with this, showing me how to assign the var location to the query and how to call the query after the data is entered.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.