オープン天気APIから情報を引き出す

Question

私はCode Penにウェブアプリケーションを作成しています。このアプリケーションは、ユーザの所在地と現地の天気を表示します。私は緯度と経度を引き上げることに成功しましたが、私はAPI呼び出しから必要なJSON情報を引き出すことができないようです。

私はAJAXでそれを解析するよ、私はOfficial API Documentationが尋ねる何やったが、それは働いていない、データがさえコンソールに表示されていないと信じています。私は多くの答えを見てきましたが、私はそれを働かせることができませんでした。

私は以下を使用してJavaScriptコードを交換し、それが動作するはずBLOCKQUOTE

if (navigator.geolocation) { 
 
    //Return the user's longitude and latitude on page load using HTML5 geolocation API 
 
    window.onload = function() { 
 
    function getCurrentLocation (position) { 
 
     
 
     latitude = position.coords.latitude; 
 
     longitude = position.coords.longitude; 
 
     
 
     console.log(latitude); 
 
     console.log(longitude); 
 

 
     $.getJSON("http://api.openweathermap.org/data/2.5/weather?lat=" + latitude + "&lon=" + longitude + "&APPID=b7aaa3a349294d5706002e82df3de1ea&units=metric", function (data) { 
 
     console.log(data); 
 
     console.log(weather.main.temp); 
 
     $(".city").append(name + " "); 
 
     $(".temperature").append(temp + " "); 
 
     $(".weatherdescription").append(field + " "); 
 
      }) 
 
      
 
     }; 
 
    } 
 
    
 
     navigator.geolocation.getCurrentPosition(getCurrentLocation); 
 
    }; 
 

<h1 class="jumbotron" style="color:white"><em>The Weather Today</em></h1> 
 

 
<div class="container-fluid"> 
 
    <div class = "row text-center"> 
 
    </div> 
 
    <div id="weather" class = "row text-center"> 
 
    <div class = "col-xs-12 well message"> 
 
     <blockquote id = "raw_json"> 
 
     <div class="weatherbox"> 
 

 
     <strong class="city">{CITY NAME HERE}</strong> 
 
    <br/> 
 
     <span class="temperature">{X} °C</span> 
 
    <br/> 
 
     <span class="weatherdescription">{WEATHER DESCRIPTION HERE}</span> 
 
     <br/> 
 

 
    </div> 
 
    </blockquote> 
 
    </div> 
 
    </div> 
 
    <div class = "row text-center"> 
 
    <div class = "col-xs-12"> 
 
     
 
    </div> 
 
    </div> 
 
</div>

Answer 1

内の情報を追加したいと思います。

if (navigator.geolocation) { 
    //Return the user's longitude and latitude on page load using HTML5 geolocation API 
    window.onload = function() { 
     navigator.geolocation.getCurrentPosition(getCurrentLocation); 

    } 

} 


function getCurrentLocation(position) { 

    latitude = position.coords.latitude; 
    longitude = position.coords.longitude; 

    console.log(latitude); 
    console.log(longitude); 

    $.getJSON("http://api.openweathermap.org/data/2.5/weather?lat=" + latitude + "&lon=" + longitude + "&APPID=b7aaa3a349294d5706002e82df3de1ea&units=metric", function (data) { 
     console.log(data); 
     console.log(weather.main.temp); 
     $(".city").append(name + " "); 
     $(".temperature").append(temp + " "); 
     $(".weatherdescription").append(field + " "); 
    }) 

}; 

CODEPEN：座標の問題を解決するようhttps://codepen.io/azimjs/pen/KXybpa?editors=0011