Using the Yahoo Weather API with JSON and the script tag

Question

I'm trying to get the Yahoo Weather with JavaScript. I originally made a proxy, but found that clumsy.

So can get the JSON response from http://weather.yahooapis.com/forecastjson?w=9807, and I know that the script tag can avoid the same-domain restrictions, but I'm getting a syntax error.

Yahoo's JSON response isn't padded; I've got the callback working but the browser isn't interpreting the JSON properly.

I've seen many examples like How to read yahoo weather JSON data with Jquery ajax but it's so weird because all those give me the cross-domain error.

Can anyone help me with this? Cross domain, yahoo weather, without special servers or YQL or anything like that. Something that just works out of the box.

Solution 1

If you're expecting JSON-P then you need to add a callback function name to the query. With jQuery, this is always ?. jQuery will substitute it with a randomly generated function name:

var query = escape('select item from weather.forecast where location="CAXX0518"'),
    url = "http://query.yahooapis.com/v1/public/yql?q=" + query + "&format=json&callback=?"; 

$.getJSON(url, function(data) {
  console.log( data );
});

Solution 2

If you want to use yql, this is the link:

http://query.yahooapis.com/v1/public/yql?q=select%20item%20from%20weather.forecast%20where%20location%3D%223015%22&format=json

When you call it just pass that as the parameter in your jquery. So, in other using STeve's code you can simply replace the url passed into the getJSON function call with the yql link and of course replace the zip code you want to use for the location. So, here's the code:

    $(document).ready(DocReady);

function DocReady()
{
    var Result = $.getJSON("http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20location%3D%2233015%22&format=json", "",
    function (data)
    {
        $("body").append("Sunrise: " + data.query.results.channel.astronomy.sunrise + "<br />");
        $("body").append("SuntSet: " + data.query.results.channel.astronomy.sunset + "<br />");
    });

}

Here is the section you need to replace to get the proper location:

Enter zip code between both %22's

http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20location%3D%22

33333

%22&format=json

Let me know if you have any questions.

Comments

[Alex Morales]

Ha, I had read your last sentence as looking to use YQL as a possibility. Well, thanks for the upvote and glad you got the answer you wanted.

[bouncingHippo]

for me it says $ is undefined on Chrome.. ala Uncaught ReferenceError: $ is not defined

[osahyoun]

Have you forgotten to load jQuery: <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min‌​.js"></script>