2013-08-08 22 views
5

APIを使用して完全なアプリケーション、特にForecast.io weather apiを作成する際に問題が発生します。簡単にするために、JSを自分のHTMLページに直接配置しました。この基本的なバージョンでは、私はこのショーを何か持っているだけでうれしいです。現在の気温(現在の気温より気温)が欲しいとしましょう。また、 "?コールバック?"すべてのRESTful APIには常に推奨されます。Forecast.io jQueryでの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> 
+0

わからないようにそれを正しく参照することができますはconsole.log(データ)を使用する場合あなたはそれを削除することを検討する必要があります。 –

+0

これを指摘してくれてありがとう。完了! – orky

答えて

8

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

あなたが返されるオブジェクトのすべてのプロパティを見ることができますので、あなたのAPIキーがプライベートであるかどうかを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> 
関連する問題