jQuery.getJSON() funktioniert nicht beim Laden der Seite. Funktioniert gut in einem Klick-Event

Question

Ich mache eine "Show-You-Local-Wetter-App" (Freecodecamp), und ich möchte, dass es die Daten beim Laden der Seite erhalten. Aber nichts passiert. Ich bin ziemlich neu, also frage ich mich, ob ich etwas Offensichtliches verpasst habe.

Es funktioniert gut, wenn ich in $ ("# some_button") formulierte. Auf ("Klick", etc ...

Ich habe versucht, es in $ (document) .ready ohne setzen succes. Was bin ich hier?

var latitude, longitude; 
var apiKey = "9b6a0d53a4ed3ff657c6ff6e18ffa42f"; 
var url; 

function success(pos) { 
    var crd = pos.coords; 
    latitude = crd.latitude; 
    longitude = crd.longitude; 
    url = "http://api.openweathermap.org/data/2.5/weather?lat=" + latitude + "&lon=" + longitude + "&units=metric&appid=" + apiKey; 
}; 

navigator.geolocation.getCurrentPosition(success); 

// AJAX call 

$.getJSON(url, function(data) { 
    $("#location").html(data.name + ", " + data.sys.country); 
    $("#weather_type").html(data.weather[0].description); 
    var imgURL = data.weather[0].icon + ".png"; 
    $("#icon").html("<img src='http://openweathermap.org/img/w/" + imgURL + "'>"); 
    $("#deg").html(data.main.temp); 
    $("#windspeed").html(data.wind.speed); 
    console.log(data); 
}); 

ich es mit codepen gemacht habe, wenn jemand es sehen wollen. ich die OpenWeatherMap API bin mit.

Dank!

Answer 1

ist hier eine bessere Lösung, wenn Ihr navigator.geolocation.getCurrentPosition(success) erfolgreich ausgeführt kehrt dann runner() Funktion.

Hier ist ganz einfach Beispiele Cordova Doc

$(document).ready(function() { 
var latitude, longitude; 
var apiKey = "9b6a0d53a4ed3ff657c6ff6e18ffa42f"; 
var url; 

function success(pos) { 
    var crd = pos.coords; 
    latitude = crd.latitude; 
    longitude = crd.longitude; 
    url = "http://api.openweathermap.org/data/2.5/weather?lat=" + latitude + "&lon=" + longitude + "&units=metric&appid=" + apiKey; 

    runner(url); 
}; 

navigator.geolocation.getCurrentPosition(success); 

// AJAX call 
function runner(url){ 
    $.getJSON(url, function(data) { 

    $("#location").html(data.name + ", " + data.sys.country); 
    $("#weather_type").html(data.weather[0].description); 
    var imgURL = data.weather[0].icon + ".png"; 
    $("#icon").html("<img src='http://openweathermap.org/img/w/" + imgURL + "'>"); 
    $("#deg").html(data.main.temp); 
    $("#windspeed").html(data.wind.speed); 
    console.log(data); 
    }); 
}; //end of runner 

}); //end of document.ready 

Answer 2

Meine Vermutung, warum $ .ready nicht funktioniert, wenn das DOM bereit ist, holt $ .getJSON immer noch von der externen API.

Aber hier ist eine Alternative

setInterval Mit

es zu stoppen, nachdem eine festgelegte Anzahl von Malen ausgeführt wird, fügen Sie einfach einen Zähler auf das Intervall, dann, wenn es diese Zahl erreicht sie stoppt.

var latitude, longitude; 
var apiKey = "9b6a0d53a4ed3ff657c6ff6e18ffa42f"; 
var url; 

navigator.geolocation.getCurrentPosition(function (pos) { 
    var crd = pos.coords; 
    latitude = crd.latitude; 
    longitude = crd.longitude; 
    url = "http://api.openweathermap.org/data/2.5/weather?lat=" + latitude + "&lon=" + longitude + "&units=metric&appid=" + apiKey; 
}); 

// AJAX call 
var timesRun = 0; 
var interval = setInterval(function(){ 
    timesRun += 1; 
    if(timesRun === 2){ 
     clearInterval(interval); 
    } 
    $.getJSON(url, function(data) { 
     $("#location").html(data.name + ", " + data.sys.country); 
     $("#weather_type").html(data.weather[0].description); 
     var imgURL = data.weather[0].icon + ".png"; 
     $("#icon").html("<img src='http://openweathermap.org/img/w/" + imgURL + "'>"); 
     $("#deg").html(data.main.temp); 
     $("#windspeed").html(data.wind.speed); 
     console.dir(data); 
    }); 
}, 2000); 

Answer 3

Ok, also tat ich es so und jetzt funktioniert es. Ich denke im Prinzip ist es das gleiche wie die Antwort von 7urkm3n?

function success(pos) { 
    var crd = pos.coords; 
    getPos(crd.latitude, crd.longitude); 
}; 

navigator.geolocation.getCurrentPosition(success); 

function getPos(latitude, longitude) { 
    var apiKey = "9b6a0d53a4ed3ff657c6ff6e18ffa42f"; 
    var url = "http://api.openweathermap.org/data/2.5/weather?lat=" + latitude + "&lon=" + longitude + "&units=metric&appid=" + apiKey; 

    // AJAX call 
    $.getJSON(url, function(data) { 
     $("#location").html(data.name + ", " + data.sys.country); 
     $("#weather_type").html(data.weather[0].description); 
     var imgURL = data.weather[0].icon + ".png"; 
     $("#icon").html("<img src='http://openweathermap.org/img/w/" + imgURL + "'>"); 
     $("#deg").html(data.main.temp); 
     $("#windspeed").html(data.wind.speed); 
    }); 
} 

Answer 4

Ihr Code gibt den $.getJSON Anruf, bevor Sie die Koordinaten in der Hand haben. Sie müssen warten, bis Sie die Koordinaten haben, und dann feuern Sie den Ajax Anruf. Beachten Sie, wo ajaxCall in dem folgenden Code aufgerufen wird:

var latitude, longitude; 
var apiKey = "9b6a0d53a4ed3ff657c6ff6e18ffa42f"; 
var url; 

function ajaxCall(url) { 
    $.getJSON(url, function(data) { 
    var imgURL = data.weather[0].icon + ".png"; 
    $("#location").html(data.name + ", " + data.sys.country); 
    $("#weather_type").html(data.weather[0].description); 
    $("#icon").html("<img src='http://openweathermap.org/img/w/" + imgURL + "'>"); 
    $("#deg").html(data.main.temp); 
    $("#windspeed").html(data.wind.speed); 
    }); 
} 

$(document).ready(function(){ 

    function success(pos) { 
    var crd = pos.coords; 
    latitude = crd.latitude; 
    longitude = crd.longitude; 
    url = (
     "http://api.openweathermap.org/data/2.5/weather" + 
     "?lat=" + latitude + 
     "&lon=" + longitude + 
     "&units=metric" + 
     "&appid=" + apiKey 
    ) 
    ajaxCall(url); 
    } 

    navigator.geolocation.getCurrentPosition(success); 
}); 

Es ist innerhalb der success Funktion sitzt — so kann es nicht feuern, bis die Daten verfügbar sind.