var lat;
var lon;
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success,error);
}
else {
alert('Geolocation not supported');
}
function error() {
alert("Couldn't find you!");
}
function success(position) {
lat = position.coords.latitude;
lon = position.coords.longitude;
var Weather = "https://fcc-weather-api.glitch.me/api/current?lat=" + lat + "&lon=" + lon;
$.ajax({
url : Weather,
dataType : "json",
success : function(data) {
var location = data["lon", "lat"]
var temp = data["temp"];
var desc = data["description"];
var wind = data["speed"];
$('#location').val(myDataObj.location)
$('#temp').val(myDataObj.temp)
$('#desc').val(myDataObj.desc)
$('#wind').val(myDataObj.wind)
$("#temp").val(myDataObj.temp)
}
});
}
Current HTML:
<head> Weather App </head>
<div class="flex-container">
<h3> You are located at <span id="location"></span>!</h3>
<h3> It is currently <span id="temp"></span> with <span id="desc"></span> and <span id="wind"></span>.</h3>
</div>
(AJAX is asynchronus javascript and xml)
You first need to find you current position through a browser API(search it)
and then sent the request through the $.ajax for current latitude and longitude
then use the response data to show info on your webpage
Yeah, it looks like you are not handling async data correctly. I wrote this pen to help people understand. You need to add the lat and lon to your weather API url string and it must be in the geolocation callback/success function. Otherwise the weather API call will be made before the code has the lat and lon. See the pen.
With regards to writing to your HTML, the AJAX is a completely separate thing. Once you use your AJAX call to load in your data, you can write it to the screen, (or not) however you want. You’re already using AJAX, so you would use that, something like:
First when you load the pen, if something is not working check the console in the developer tools
for any errors.
I ll go fast forward and say that you try to assign the
.val
of elements a variable that is not defined
secondly i would first console.log the response of the ajax. check what im getting and properly declare the values
and make the assignments i want.
I would make on suggestion - when you have a thread, please don’t go back and edit the code in a previous post - it makes for confusing reading for others. Just create a new response to the thread.
Nope Console says t is undefined and myDataObj is not defined. This jump from algorithms to making API calls and getting data returned is quite a leap, this is tough.
var lat;
var lon;
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success,error);
}
else {
alert('Geolocation not supported');
}
function error() {
alert("Couldn't find you!");
}
function success(position) {
lat = position.coords.latitude;
lon = position.coords.longitude;
var Weather = "https://fcc-weather-api.glitch.me/api/current?lat=" + lat + "&lon=" + lon;
$.ajax({
url : Weather,
dataType : "jsonp",
success : function(data) {
var location = data["lon", "lat"]
var temp = data["temp"];
var desc = data["description"];
var wind = data["speed"];
$('#location').val(myDataObj.location)
$('#temp').val(myDataObj.temp)
$('#desc').val(myDataObj.desc)
$('#wind').val(myDataObj.wind)
$("#temp").val(myDataObj.temp)
}
});
}
I’ve edited your post for readability. When you enter a code block into the forum, precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.
Console says t is undefined and myDataObj is not defined. This jump from algorithms to making API calls and getting data returned is quite a leap, this is tough.