Forecast.io API-Verwendung mit jQuery

Ich habe Probleme beim Erstellen einer vollständigen Anwendung mithilfe einer API, speziell der Forecast.io Wetter API. Der Einfachheit halber habe ich meinen JS direkt in meine HTML-Seite eingefügt. Für diese Basisversion würde ich mich freuen, wenn diese Show etwas bringt. Nehmen wir an, ich wollte die aktuelle Temperatur (aktuell -> Temperatur). Außerdem bin ich mir nicht sicher, ob "Callback?" wird immer für alle RESTful-APIs empfohlen.Forecast.io API-Verwendung mit jQuery

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

Quelle

2013-08-08 orky

Nicht sicher referenzieren, wenn Ihr apikey privat ist oder jetzt, aber Sie sollten darüber nachdenken, es zu entfernen. –

Vielen Dank, dass Sie darauf hingewiesen haben. Erledigt! – orky

Der Hauptfehler Sie :-) Der nächste nicht wie jQuery gemacht wird, ist, dass auf einem jQuery-Objekt das HTML() Funktion anstelle der JavaScript nativen Eigenschaft innerhtml verwenden müssen.

Wenn Sie console.log (Daten) können Sie alle Eigenschaften des zurückgegebenen Objekts sehen, so dass Sie es richtig wie 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>

Quelle

2013-08-08 18:37:09

Antwort

Verwandte Themen