I’m stuck trying to pass the data to the document. Not sure which jQuery method/syntax is screwed up: I get user lat/long data, I also get the openweathermap api data, but can’t get it to pass the data to the body elements. I’ve tried several w3s jQuery walk-throughs and examples but not sure where I’m screwing this up. o.0
<!-- NO COPYRIGHT CLAIMED -->
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var OWM_API_KEY = "abcdefghijklmnopqrstuvwxyz123456"; //<--- fake key, use your own ;)
// get users lat/long
var getPosition = {
enableHighAccuracy: false,
timeout: 9000,
maximumAge: 0
};
function success(gotPosition) {
var uLat = gotPosition.coords.latitude;
var uLon = gotPosition.coords.longitude;
console.log(`${uLat}`, `${uLon}`);
// now put the users lat/long into the OpenWeatherMap API Query
var localWeather;
$.getJSON('http://api.openweathermap.org/data/2.5/weather?lat=' + uLat + '&lon=' + uLon + '&appid=' + OWM_API_KEY + '&units=imperial',
function(weatherData) {
console.log(weatherData);
var userLocation = weatherData.name;
var userCountry = weatherData.sys[0].country;
// setup vars to pass to html doc
$("#userLocation").text(userLocation);
$("#userCountry").html(userCountry);
})
};
function error(err) {
console.warn(`ERROR(${err.code}): ${err.message}`);
};
navigator.geolocation.getCurrentPosition(success, error, getPosition);
});
</script>
</head>
<body>
<div>
<div>
<h1 id="userLocation">Getting location...</h1>
</div>
</div>
</body>