Ajax and Weather Viewer Help

You must load jQuery before Bootstrap 4 library in the JS section, because Bootstrap depends on jQuery. Switch the order of the two in the external libraries section and the error will go away.

You will still not see anything on your page once you resolve the above issue, because your code (shown below) attempts to reference object properties which do not exist in the JSON response.

var location = data[("lon", "lat")];
var temp = data["temp"];
var desc = data["description"];
var wind = data["speed"];

Put a console.log(data) inside the $.ajax call’s success function so you can see the actual structure of the JSON response. If you can not remember how to reference nested object properties, you might need to review the following challenges:

Accessing Nested Objects

Accessing Nested Arrays

So that’s how you do it! I was just thinking “those data calls are probably wrong”. But couldn’t figure out how to view the JSON response. Thanks!

Also, you should read about the jQuery text method instead of the jQuery val method to update the inner text of the elements.

Still not getting a readable response from console. I’m getting an Error: promised response blah blah blah something went out of scope.

When I just checked out your Codepen, I do not see any errors. Make sure to clear out your console and then click Run.

Error: Promised response from onMessage listener at init@moz-extension://e4c523a9-9034-449c-95d8-4651fc3bbf59/dist/background.js:8:1517636 went out of scope undefined
console_runner-ce3034e6bde3912cc25f83cccb7caa2b0f976196f2f2d52303a462c826d54a73.js:1
Error: Promised response from onMessage listener at init@moz-extension://e4c523a9-9034-449c-95d8-4651fc3bbf59/dist/background.js:8:1517636 went out of scope

Also, no json data is displayed in the console.

What browser are you using? Can you take a screenshot of the error?

When I run your Codepen (shown in the link above), I get the following in the Codepen and the browser’s console:

That shows up after I hit the allow location for Firefox.

So you are using the Firefox browser? What version?

59.0.3 32 bit. How did you get the console inside the codepen webpage?

See the button at the bottom left of my screenshot? That will toggle the Codepen console.

I just used Firefox 59.0.3 64 bit but do not see that error message. Not sure what to tell you at this point.

Randell I hope we meet in real life sometime so I can shake your hand and buy you a beer. Thank you sir. I’ll try to get it from here and update this if I get stuck again. (more than likely)

1 Like

Any idea why data.weather.description would return a undefined?

Yes, look carefully, because weather is an array and not an object.

1 Like

Figured it out! On to the background picture next. Thanks again for this loooooong help session. It’s appreciated.

Would you mind looking at my pen one last time? I’m trying to update the background-image with the icon url and can’t seem to get the syntax right. I’m going off this: https://www.w3schools.com/jquery/jquery_css.asp

If you look at your browser’s console, you will see an error that says:

Uncaught ReferenceError: url is not defined

That is because when you write ulr(background), only background is a variable. The rest needs to be a string. So you must write:

$(".flex-container").css("background-image", "url(" + background + ")");

EDIT: To prevent the background image from repeating, your css should have:

.flex-container{
	background-repeat: no-repeat;
}
1 Like

Got it! Thanks again. Now CSS it till’ it’s pretty.