2017-01-02 10 views
0

私は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

答えて

1

プログラミングJavaScriptが簡単にくらいになります。

混在したコンテンツ::ここではあなたの中に現れてことがありますエラーです「https://codepen.io/Zero720/pen/RoOwaw」のページがHTTPSでロードされますが、安全でないXMLHttpRequestのエンドポイント「http://api.openweathermap.org/data/2.5/weather?lat=42.9976979&lon=-77.50486959999999&APPID=d160d975b9920be65fcf14313e95afb4&units=metric」を要求しました。このリクエストはブロックされました。 HTTPS経由でコンテンツを配信する必要があります。

. 
+0

リクエストを受け渡しするにはどうすればよいですか? –

+0

@LuisAlvarez有料ユーザー向けにのみHTTPSを許可するように見えます。 https://openweathermap.desk.com/customer/portal/questions/8166727-http-to-httpsあなたのCodepenはHTTPとしてアクセス可能に見えます:http://codepen.io/Zero720/pen/RoOwaw – ceejayoz

+0

しかし、人々は完了しましたそれはこのページにあり、サンプルプロジェクトを見ています:http://codepen.io/FreeCodeCamp/full/bELRjV –

関連する問題