Question
How can I build a minimal working sample on a site like codepen showing a location and it's temperature using the Yahoo weather API. I need specifically San Diego, CA. And using only HTML and Javascript, not PHP.
Background
I did check the site for a similar question but it only addressed temperature Getting only temperature from Yahoo Weather but it's only answer linked to an overplicated tutorial with excessive code.
Other answers on the site only have YML but don't show how to integrate an entire working example.
I was following along to the documentation from Yahoo but there is no working example like how NASA has a live example
Code
I have this CodePen demo
HTML
<div id="output"></div>
Javascript
$(document).ready(function () {
$.getJSON(".condition%20from%20weather.forecast%20where%20woeid%20%3D%202487889&format=json&env=store%3A%2F%2Fdatatables%2Falltableswithkeys/", function (data) {
console.log(data);
console.log(query)
$('#output').append( 'The temperature in' + result.location.["location"] + 'is' + result.condition.["temp"] );
})
})
Question
How can I build a minimal working sample on a site like codepen showing a location and it's temperature using the Yahoo weather API. I need specifically San Diego, CA. And using only HTML and Javascript, not PHP.
Background
I did check the site for a similar question but it only addressed temperature Getting only temperature from Yahoo Weather but it's only answer linked to an overplicated tutorial with excessive code.
Other answers on the site only have YML but don't show how to integrate an entire working example.
I was following along to the documentation from Yahoo but there is no working example like how NASA has a live example
Code
I have this CodePen demo
HTML
<div id="output"></div>
Javascript
$(document).ready(function () {
$.getJSON("https://query.yahooapis./v1/public/yql?q=select%20item.condition%20from%20weather.forecast%20where%20woeid%20%3D%202487889&format=json&env=store%3A%2F%2Fdatatables%2Falltableswithkeys/", function (data) {
console.log(data);
console.log(query)
$('#output').append( 'The temperature in' + result.location.["location"] + 'is' + result.condition.["temp"] );
})
})
Share
edited May 23, 2017 at 12:33
CommunityBot
11 silver badge
asked Feb 6, 2017 at 18:51
JGallardoJGallardo
11.4k11 gold badges86 silver badges99 bronze badges
2
- You have lots of problems with your example like accessing variables that dont exist – Kevin Jantzer Commented Feb 6, 2017 at 19:02
-
Check your console and evaluate data. Also, there are a few errors in your demo... First, your syntax is incorrect.
result.location.["location"]
would throw a parsing error. Also,query
is never defined. – Dom Commented Feb 6, 2017 at 19:03
3 Answers
Reset to default 2Here's a working example based on your original code.
Something to note: you were doing this result.location.["location"]
Which is invalid. You could use result.location["location"]
or result.location.location
(neither of which are returned in your result btw)
var queryURL = "https://query.yahooapis./v1/public/yql?q=select%20item.condition%20from%20weather.forecast%20where%20woeid%20%3D%202487889&format=json&env=store%3A%2F%2Fdatatables%2Falltableswithkeys/";
$.getJSON(queryURL, function (data) {
var results = data.query.results
var firstResult = results.channel.item.condition
console.log(firstResult);
var location = 'Unknown' // not returned in response
var temp = firstResult.temp
var text = firstResult.text
$('#output').append('The temperature is ' + temp + '. Forecast calls for '+text);
})
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="output"></div>
Update
Your API query doesn't return location because you have it limited to select item.condition
Change q=select%20item.condition
to q=select%20*
andd you get a lot more data returned, including location.
Couple of things here:
- You are trying to access the location and weather data incorrectly. You should be using data.location and data.weather since you are passing the JSON into the function as data in the function (data) section.
- Your API call is not being made properly. Review the documentation here and try to make the call again. https://developer.yahoo./weather/
This example does not have any excessive code and would be a great place to start: https://developer.yahoo./weather/#get-started
Based on the accepted answer I made one modification to account for the location. It's woeid
has to be looked up using something like http://woeid.rosselliot.co.nz/ and then defined as a variable, in my case it was San Diego.
The resulting Javascript was
var queryURL = "https://query.yahooapis./v1/public/yql?q=select%20item.condition%20from%20weather.forecast%20where%20woeid%20%3D%202487889&format=json&env=store%3A%2F%2Fdatatables%2Falltableswithkeys/";
$.getJSON(queryURL, function (data) {
var results = data.query.results
var firstResult = results.channel.item.condition
console.log(firstResult);
var location = 'San Diego'
var temp = firstResult.temp
var text = firstResult.text
$('#output').append('The temperature in ' + location + ' is ' + temp + '. Forecast looks '+ text);
})
full working demo is at http://codepen.io/JGallardo/pen/XpBMRX