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; 
};
}

@Raptor sorry for not mentioning this earlier. I think I am forgetting something in here https://gist.githubusercontent.com/ydn/6ef5a695e871b8a628d0/raw/weather.js — Alex Webber, Mar 10 '15 at 02:27
It is not showing up the current wind chill, and I do not know where to put the missing information. — Alex Webber, Mar 10 '15 at 02:28
Check developer console in browser. Any JS error prompted ? Is the network request going through successfully ? — Raptor, Mar 10 '15 at 02:32
there is no `windchill` variable / function in your code. Where does the error located? Please provide more information. Also, your first JS script tag is weird. Last, did you miss `` tag? — Raptor, Mar 10 '15 at 02:43

score 0 · Answer 1 · answered Mar 21 '15 at 08:51

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.

In need of assistance with Yahoo Weather API

1 Answers1