Login/Register
Forecast.io API Usage with jQuery
Asked Answered
Solved jqueryjsonapiweather-api
A

1

5

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>
Aldrich answered 8/8, 2013 at 17:56 Comment(1)
Not sure if your apiKey is private or now but you should consider removing it. – Treva
W
8

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>
Wilding answered 8/8, 2013 at 18:37 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.