Question

Question

51

Javascript and HTML to display temperature and location from Yahoo API

rated 0 times [ 52] [ 1] / answers: 1 / hits: 17228 / 7 Years ago, mon, february 6, 2017, 12:00:00

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 overcomplicated 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.com/v1/public/yql?q=select%20item.condition%20from%20weather.forecast%20where%20woeid%20%3D%202487889&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys/, function (data) {

        console.log(data);

        console.log(query)

        $('#output').append( 'The temperature in' + result.location.[location] + 'is' + result.condition.[temp] );

    })

})

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

carlymykalac

Add To Favorites

Follow

Total Points: 740

Total Questions: 91

Total Answers: 91

Location: Sudan

Member since Thu, May 7, 2020

4 Years ago

answered 7 Years ago luna · Accepted Answer

Here'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.com/v1/public/yql?q=select%20item.condition%20from%20weather.forecast%20where%20woeid%20%3D%202487889&format=json&env=store%3A%2F%2Fdatatables.org%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.com/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.