Kann Daten mit getJSON nicht extrahieren

Ich mache gerade den freecampcode curriculum Ich bin auf der lokalen Wetterstation.Kann Daten mit getJSON nicht extrahieren

Mein Problem hier ist jedes Mal, wenn ich versuche zu verwenden, ich bekomme apiLink ist nicht definiert. Ich verstehe, dass der .getJSON-Teil nicht mit der var innerhalb der DefinedCordinates-Funktion definiert werden kann.

Auch ich habe versucht, den direkten API-Link auf die .getJSON-Funktion zu verwenden, aber selbst damit bekomme ich 0 Eingabe von json, im mit console.log (Daten) und $ ("# temp") die Eingabe von json.

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8"> 
    <title>My Local Weather App</title> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
    <link rel="stylesheet" type="text/css" href="custom.css">. 
    <script type="text/javascript"> 
    $(document).ready(function(){ 
     getCordinates(); 
     $.getJSON(apiLink, function(data){ 
      console.log(data); 
     }) 
    }) 

    function getCordinates(){ 
     navigator.geolocation.getCurrentPosition(definedCordinates); 
    } 

    function definedCordinates(position){ 
     var latitude = Math.floor(position.coords.latitude); 
     var longitude = Math.floor(position.coords.longitude); 
     var apiLink = "api.openweathermap.org/data/2.5/weather?lat=" + latitude +"&lon="+ longitude +"&APPID=##########"; 
     return apilink; 
} 
    </script> 


<body> 
    <div class="container-fluid"> 
     <div class="row" id="titleRow"> 
      <div class="col-md-4 col-md-offset-4"> 
       <h1>My Local Weather App</h1> 
      </div> 
     </div> 
     <div class="row" id="locationRow"> 
      <div class="col-md-4 col-md-offset-4"> 
       <div class=row"> 
        <div class="col-md-6" style="background-color: grey"> 
         <p style="text-align:center">icon</p> 
        </div> 
        <div class="col-md-6" style="background-color: yellow"> 
         <p style="text-align:center" id="temp">temp</p> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="row" id="dataRow"> 
      <div class="col-md-6 col-md-offset-3"> 
       <div class="row"> 
        <div class="col-md-4" style="background-color: grey"> 
         <p id="name"> city name</p> 
        </div> 
        <div class="col-md-4" style="background-color: yellow"> 
         <p> sky</p> 
        </div> 
        <div class="col-md-4" style="background-color: grey"> 
         <p> wind</p> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="row" id="poweredBy"> 
      <div class="col-md-6 col-md-offset-3"> 
       <div class="row"> 
        <div class="col-md-6" id="powered"> 
         <p> Powered by openweathermap.org API </p> 
        </div> 
        <div class="col-md-6"style="background-color: yellow"> 
         <p> button celsius or farh </p> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</body> 
</html>

Quelle

2016-11-08 Joao Nunes

Das Problem ist, weil Ihr apiLink Variable in der definedCordinates() Funktion definiert, die auch außerhalb des Bereichs der document.ready Handler ist.

Um dies zu beheben, müssen Sie Ihre Logik so umstrukturieren, dass apiLink für die AJAX-Anforderung verfügbar ist, indem die entsprechenden Rückrufe für asynchrone Methoden verwendet werden. Versuchen Sie folgendes:

$(document).ready(function(){ 
    getCordinates(function(apiLink) { 
     $.getJSON(apiLink, function(data) { 
      console.log(data); 
     }) 
    }); 
}) 

function getCordinates(callback) { 
    navigator.geolocation.getCurrentPosition(function(position) { 
     var latitude = Math.floor(position.coords.latitude); 
     var longitude = Math.floor(position.coords.longitude); 
     var apiLink = "https://api.openweathermap.org/data/2.5/weather?lat=" + latitude + "&lon=" + longitude + "&APPID=##########" 
     callback && callback(apiLink) 
    }); 
}

Beachten Sie auch, dass die apiLink sollte eine absolute URL sein, dh. Es benötigt eine http:// oder https:// Vorwahl.

Quelle

2016-11-08 12:27:41

Ich versuche Ihre Lösung, aber ich habe keine Ausgabe auf Firefox Konsole erhalten. –

Überprüfen Sie die Anforderung in der Konsole, um sicherzustellen, dass sie wie erwartet funktioniert. Lassen Sie mich wissen, wenn Sie einen Fehler erhalten –

Vielen Dank für die schnelle Antwort, bekomme ich den folgenden Fehler: "Header CORS" Access-Control-Allow-Origin "fehlt" –

getCordinates benötigt einen Wert (URL) zurückzukehren, und Sie müssen diesen Wert getJSON passieren und nicht ein Objekt (die im gleichen Umfang nicht bereit, wie Ihr Dokument existieren!)

einem wahrscheinlicheren Fix wäre so etwas wie:

$(document).ready(function(){ 
    var url = getCordinates(); 
    $.getJSON(url, function(data){ 
     console.log(data); 
    }) 
}) 

function getCordinates(){ 
    navigator.geolocation.getCurrentPosition(definedCordinates); 
} 

function definedCordinates(position){ 
    var latitude = Math.floor(position.coords.latitude); 
    var longitude = Math.floor(position.coords.longitude); 
    var apiLink = "api.openweathermap.org/data/2.5/weather?lat=" + latitude +"&lon="+ longitude +"&APPID=##########"; 
    return apilink; 
}

Sie werden auch in ein Problem laufen, wie Sie nichts in definedCoordinates vorbei sind.

Dies, indem ich apiLink eine globale Variable gelöst werden könnte, aber das ist kein guter Weg, um das Problem

Quelle

2016-11-08 12:27:44 hairmot

OP ruft 'getCordinates()', was nichts zurückgibt - und kann nicht, weil der 'getCurrentPosition()' Aufruf async ist –

Die Funktion getCordinates nicht zurück nichts, und selbst zu lösen, wenn es tut, es synchron die URL nicht zurückkehren kann, weil der Callback definedCordinates nur später asynchron aufgerufen wird. Zweitens wird der Rückgabewert von diesem Callback (der die URL ist) derzeit nicht verwendet, sondern verschwindet in Vergessenheit.

Es gibt mehrere Möglichkeiten, dies zu lösen, aber in diesem Fall ein Versprechen Zugabe (zu dem Versprechen, dass $.getJSON bereits ist) scheint wie eine schöne Lösung:

$(document).ready(function(){ 
    getCordinates().then(function(apiLink) { 
     // this executes when the promise returned by getCordinates is resolved: 
     return $.getJSON(apiLink); 
    }).then(function (data) { 
     // this executes when the promise returned by getJSON is resolved: 
     console.log(data); 
    }); 
}) 

function getCordinates() { 
    // return a promise that resolves when you get the current position: 
    return new Promise(function (resolve) { 
     navigator.geolocation.getCurrentPosition(function (position) { 
      resolve(definedCordinates(position)); 
     }); 
    }); 
}

Die Funktion definedCordinates bleiben kann, wie es ist, Korrigieren Sie die falsche Schreibweise von apiLink in der Return-Anweisung.

Quelle

2016-11-08 12:52:00 trincot

Ich versuche Ihre Lösung, aber ich habe keine Ausgabe auf Firefox Konsole erhalten. –

Ich bin auf Firefox und es funktioniert für mich, obwohl ich mit einem anderen JSON-Server testen musste (ich habe nicht Ihre API-ID). Ich bemerke in Ihrer Frage, dass Sie 'apiLink' in der return-Anweisung falsch geschrieben haben (sollte nicht alles in Kleinbuchstaben sein). Abgesehen davon sehe ich keinen Grund, warum es nicht funktionieren sollte. – trincot

Kann Daten mit getJSON nicht extrahieren

Antwort

Verwandte Themen