2013-08-08 7 views
5

Mam problem z utworzeniem kompletnej aplikacji za pomocą interfejsu API, w szczególności api aplikacji Forecast.io. Dla uproszczenia umieściłem mój JS bezpośrednio na mojej stronie HTML. Dla tej podstawowej wersji, byłbym szczęśliwy, gdyby ten program był czymś. Powiedzmy, że chciałem aktualną temperaturę (obecnie -> temperatura). Ponadto nie jestem pewien, czy "? Callback?" jest zawsze zalecane dla wszystkich API RESTful.Forecast.io Wykorzystanie interfejsu API z 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> 
+0

Nie jestem pewien, czy to prywatne czy apiKey teraz, ale powinieneś rozważyć jego usunięcie. –

+0

Dzięki za wskazanie tego. Gotowe! – orky

Odpowiedz

8

Głównym błędem dokonane nie jest w tym jQuery :-) Kolejnym jest to, że na obiekcie jQuery trzeba użyć funkcji Kopiuj() zamiast natywnej własności innerHTML JavaScript.

Jeśli używasz console.log (dane) można zobaczyć wszystkie właściwości zwróconego obiektu, dzięki czemu można go odwołać poprawnie jak 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> 
Powiązane problemy