私はfreecodecampでコースを受講していますが、現在天気予報のアプリのジップラインに詰まっています。私が呼び出しているAPIはOpenWeatherMapです。私の問題は、$ .getJsonがリンクが正しくてもデータを返さないということです。私は$ .getJSONの外に警告を出し、うまく動作します。私はソースコードを共有します:
これはcodepenが単独でそれを行うため、htmlタグが表示されていない場合、これはすべてcodepenで行われます。 CSSもこれを行います。
HTML
<head>
<title>Weather App</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<h1>Free Code Camp Zipline</h1>
<h2>Local Weather App!</h2>
<p id="latitude"></p>
<p id="longitude"></p>
<div id="weather"></div>
<footer>
<p>Copyright © Luis M. Alvarez 2016. All Rights Reserved</p>
</footer>
</body>
CSS
body {
margin: 0;
font-family: "Georgia";
}
h1, h2 {
text-align: center;
}
p {
font-size: 20px;
text-align: center;
}
Javascriptを
$(document).ready(function(){
///Geolocation
//Find the geolocation
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
$("#latitude").html("latitude: " + position.coords.latitude);
$("#longitude").html("longitude: " + position.coords.longitude);
///Weather API
//Setup for weather app
var key = "d160d975b9920be65fcf14313e95afb4";
var weatherNow = "http://api.openweathermap.org/data/2.5/weather?lat=" + position.coords.latitude + "&lon=" + position.coords.longitude + "&APPID=" + key + "&units=metric";
//Get the weather
//Here alert does work
$.getJSON(weatherNow, function(data) { //Where weatherNow is on this line the alert works too example: $.getJSON(alert(weatherNow), function(data) {
//Here the alert doesn't work
alert(weatherNow);
});
});
};
});
ここにコメントが追加されたので、コードが混乱することはありません。なぜ動作しないのか、それを動作させる方法について詳しく説明してください。プロジェクトの
リンク:あなたがお使いのブラウザでJavaScriptコンソールを自分で知らせる場合 https://codepen.io/Zero720/pen/RoOwaw
http://openweathermap.org/current
リクエストを受け渡しするにはどうすればよいですか? –
@LuisAlvarez有料ユーザー向けにのみHTTPSを許可するように見えます。 https://openweathermap.desk.com/customer/portal/questions/8166727-http-to-httpsあなたのCodepenはHTTPとしてアクセス可能に見えます:http://codepen.io/Zero720/pen/RoOwaw – ceejayoz
しかし、人々は完了しましたそれはこのページにあり、サンプルプロジェクトを見ています:http://codepen.io/FreeCodeCamp/full/bELRjV –