I'm writing a web application on Code Pen which takes user location and display the current local weather. I succeeded in pulling the latitude and longitude, but I don't seem to be able to pull the JSON information I need from the API call.
I'm parsing it with AJAX, I believe I've done what the Official API Documentation asks, but it's not working, the data isn't even displayed on the console. I've looked through many answers but I couldn't get it working.
I would like to add the information inside 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>Replace your javascript code with the below and it should work.
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 + " ");
})
};