Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Forecast.io API Usage with jQuery

I'm having some trouble creating a complete application using an API, specifically the Forecast.io weather api. For simplicity, I've put my JS directly in my HTML page. For this basic version, I would be happy just to have this show something. Let's say I wanted current temperature (currently -> temperature). Also, I'm not sure if "?callback?" is always recommended for all RESTful APIs.

<!DOCTYPE html>
<html>
    <body>  
    <p id="weather">Here's the weather:<p>

    <button onclick="b()">Submit</button>
        <script>

        function b(){

            var apiKey = '<private>';
            var url = 'https://api.forecast.io/forecast/';
            var lati = 0;
            var longi = 0;
            var data;

            $.getJSON(url + apiKey + "/" + lati + "," + longi + "?callback=?", function(data) {
              $('#weather').innerHTML('and the weather is: ' + data[4].temperature);
            });
        }
        </script>

    </body>
</html>
like image 970
orky Avatar asked Aug 08 '13 17:08

orky


1 Answers

The main mistake you made is not including jQuery :-) The next one is that on a jQuery object you need to use the html() function instead of the JavaScript native innerHTML property.

If you use console.log(data) you can see all the properties of the returned object, so you can reference it correctly like data.currently.temperature

<!DOCTYPE html>
<html>
    <body>
    <p id="weather">Here's the weather:<p>

    <button onclick="b()">Submit</button>
        <script>

        function b(){

            var apiKey = '<PRIVATE>';
            var url = 'https://api.forecast.io/forecast/';
            var lati = 0;
            var longi = 0;
            var data;

            $.getJSON(url + apiKey + "/" + lati + "," + longi + "?callback=?", function(data) {
              //console.log(data);
              $('#weather').html('and the temperature is: ' + data.currently.temperature);
            });
        }
        </script>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

    </body>
</html>
like image 157
Leonardo Gonzalez Avatar answered Oct 01 '22 07:10

Leonardo Gonzalez