Использование API forecast.io с помощью jQuery

У меня возникли проблемы с созданием полного приложения с использованием API, в частности WeatherPro. Для простоты я поставил JS прямо на мою HTML-страницу. Для этой базовой версии я был бы счастлив просто показать это шоу. Скажем, мне нужна текущая температура (в настоящее время → температура). Кроме того, я не уверен, что "ответ"? всегда рекомендуется для всех API-интерфейсов RESTful.

<!DOCTYPE html>
<html>
    <body>  
    <p id="weather">Here 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>

Ответы

Ответ 1

Основная ошибка, которую вы сделали, не включает jQuery:-) Следующим из них является то, что в объекте jQuery вам нужно использовать функцию html() вместо свойства innerHTML для JavaScript.

Если вы используете console.log(данные), вы можете увидеть все свойства возвращаемого объекта, чтобы вы могли корректно ссылаться на него. data.currently.temperature

<!DOCTYPE html>
<html>
    <body>
    <p id="weather">Here 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>