jQuery.getJSON（）がページの読み込みに失敗しました。クリックイベント内でうまく動作します

Question

私は "show-you-local-wather-app"（freecodecamp）を作っています。しかし、何も起こりません。私はこれでかなり新しいので、私は何かを見逃してしまったのだろうかと思っています。

私は（「クリック」に。$（「＃のsome_button」）の中に置く場合、それは私がどのなし$（ドキュメント）.ready内側に入れて試してみた...など、

を正常に動作します大成功。私はここで行方不明です？

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); 
}); 

誰もがそれを見たい場合、私はcodepenでそれを作った。 私はOpenWeatherMap APIを使用しています。

ありがとう！

Answer 1

は、よりよい解決策です。ここで

は非常に簡単な例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

私は$ .readyがうまくいかない理由を推測しています。DOMが準備できたら、$ .getJSONはまだ外部APIからフェッチしています。

しかし、ここでは、それが停止し、その数に達したときにだけ、その後、間隔にカウンターを追加し、設定された回数を実行した後、それを停止するのsetInterval

を使用して代替

です。あなたのnavigator.geolocation.getCurrentPosition(success)が正常runner()機能を実行し、その後返した場合はここで

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ですので、私はこのようにそれをやったし、今では動作します。私は原則として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

あなたのコードは、座標を手に入れる前に$.getJSONコールを発行します。あなたは座標があるまで待つ必要があり、そしてはajax呼び出しを発します。 ajaxCallは、以下のコードで呼び出されます注意：データが利用可能になるまで

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); 
}); 

それはsuccess機能—の内側に座っていますので、それは発射することはできません。