2016-05-08 19 views
2

Ich versuche eine Seite zu erstellen, die die openweathermap API verwendet, um die Stadt und die lokale Temperatur des Benutzers anzuzeigen, leider scheint es, die JSON-API nicht zu verarbeiten und ist nichts tun. Mein Code ist in Ordnung, soweit ich das beurteilen kann, daher verstehe ich nicht, was falsch ist.
Hier ist der jsfiddle Link und javscript Code:
https://jsfiddle.net/qo2h1L9e/2/Javascript scheint nicht zu verarbeiten JSON api

$(document).ready(function() { 
    var data; 
    if (navigator.geolocation) { 
    navigator.geolocation.getCurrentPosition(function(position) { 
     var lat = position.coords.latitude; 
     var lon = position.coords.longitude; 
     console.log(lat); 
     console.log(lon); 
     console.log("api.openweathermap.org/data/2.5/weather?lat=" + lat + "&lon=" + lon + "&APPID=4907e373098f091c293b36b92d8f0886"); 
     $.getJSON("api.openweathermap.org/data/2.5/weather?lat=" + lat + "&lon=" + lon + "&APPID=4907e373098f091c293b36b92d8f0886", function(json) { 
     data = json; 
     console.log(data.name); 
     $("#city").text(data.name); 
     }); 
    }); 
    } 
}); 
+0

Adressen werden relativ zum aktuellen 'window.location' angenommen und' api.openweathermap.org' kann auch ein gültiger Verzeichnisname sein. Fügen Sie das Protokoll und den Anker in die Adresse ein, damit es als Hostname erkannt wird. "" Http: //api.openweathermap.org/ ... "' –

+0

Ich habe wie Sie empfohlen und es hat nicht geholfen. Wenn ich die URL von der Konsole nehme und sie in die Adressleiste meiner Suchmaschine lege, bekomme ich das gewünschte JSON-Objekt auf meiner Seite, aber mein Code scheint es aus irgendeinem Grund nicht zu empfangen. – majestyc54

+0

Erhalten Sie Fehler? Browser protokollieren normalerweise Gründe für Ajax-Anfragen, die in ihren Konsolen fehlschlagen. –

Antwort

1

ich ein ähnliches Problem hatte, als diese Codierung. Angenommen, Sie sind auf FCC?

Wie auch immer, versuchen Sie & Callback =? zur api URL. Möglicherweise müssen Sie die Daten als JSONP und nicht als JSON abrufen.

Außerdem müssen Sie keine Daten definieren. Sie können auf das Objekt direkt über den Parameter json zugreifen.

0

Ich habe getan, es jQuery versuchen diesen Code

 $(document).ready(function() { 
      var data; 
      if (navigator.geolocation) { 
       navigator.geolocation.getCurrentPosition(function(position) { 
        var lat = position.coords.latitude; 
        var lon = position.coords.longitude; 
        console.log(lat); 
        console.log(lon); 
        console.log("api.openweathermap.org/data/2.5/weather?lat=" + lat + "&lon=" + lon + "&APPID=4907e373098f091c293b36b92d8f0886"); 
//     $.getJSON("api.openweathermap.org/data/2.5/weather?lat=" + lat + "&lon=" + lon + "&APPID=4907e373098f091c293b36b92d8f0886", function(json) { 
//      data = json; 
//      console.log(data.name); 
//      $("#city").text(data.name); 
        //     }); 
        var url = 'http://api.openweathermap.org/data/2.5/weather'; 
        var params = {}; 
        params.lat = lat; 
        params.lon = lon; 
        params.APPID = "4907e373098f091c293b36b92d8f0886"; 

        $.ajax({ 
         type: "GET", 
         url: url, 
         dataType: "jsonp", 
         contentType: "application/json; charset=utf-8", 
         data: params, 
         success: function (res) { 
          console.log(res); 
         }, 
         error: function (res) { 
         } 
        }); 


       } 
       ); 
      } 
     }); 

Das Problem jsonp in json .Für Cross-Domain verwendet wird.