5

API、特に Forecast.io 天気 API を使用して完全なアプリケーションを作成するのに問題があります。簡単にするために、JS を HTML ページに直接配置しました。この基本バージョンは、これだけで何かを見せてくれたら嬉しいです。現在の温度が必要だとしましょう (現在 -> 温度)。また、「?callback?」すべての RESTful API に対して常に推奨されます。

<!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>
4

1 に答える 1

8

あなたが犯した主な間違いは、jQuery を含めなかったことです:-) 次は、jQuery オブジェクトでは、JavaScript ネイティブの innerHTML プロパティの代わりに html() 関数を使用する必要があることです。

console.log(data) を使用すると、返されたオブジェクトのすべてのプロパティを確認できるため、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>
于 2013-08-08T18:37:09.517 に答える