Ajax and Weather Viewer Help

I’m looking for feedback on how to proceed with the Weather App. The API is linked for reference. https://fcc-weather-api.glitch.me/

Current JS Code:

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>

Can you ask a more specific question about what you have posted? Do you see any errors in your browser’s console (Ctrl+Shft+J in Chrome)? What are you expecting this code to do vs. what it actually is doing? The more information you can give us about what you are trying to accomplish with this particular code, the better we can guide you to a solution.

(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

Do I have to use AJAX or any API to take the data from URL and parse the data into my HTML? Can I just use plain JavaScript?

See updated code and question.

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:

$("#temp").val(myDataObj.temp)

But it must be in scope.

2 Likes

Thanks Kevin, I’ll try and figure it out from here.

See updated code, am I getting closer?

You need to move the $.ajax inside the success function in order to work

See updated code, am I getting closer?

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.

But as you are now, you are getting the response from the ajax call, which is great.

So ? did you it? is ti working?

Well, the code runs.

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 :confused: 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)
				}
		});
}

Yeah I’ll do that from now on.

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.

markdown_Forums

That’s because myDataObj is just something I made up. You are creating your own variables, which is fine. So you need to refer to those.

  var temp = data["temp"];
// ...
  $('#temp').val(temp)
1 Like

Oh yeah, duh. Haha whoops

Hey, I’m still getting t is undefined. Any ideas?