I need help accessing the weather api for the weather project

I need help accessing the weather api for the weather project
0

#1

How do I access the weather api and display the json content? I’ve been trying to figure this out for 5 days but no luck. Please help, thanks.

link - https://codepen.io/colinsteidtmann/full/YYEGpO/


#2

Check your browser’s console (Ctrl+Shft+J in Chrome), because you currently have an error you need to fix first.


#3

@RandellDawson Okay, I saw the console and I got the following reference error -

jQuery.Deferred exception: position is not defined" "ReferenceError: position is not defined
    at HTMLDocument.<anonymous> (pen.js:52:69)
    at j (https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js:2:29999)
    at k (https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js:2:30313)" undefined 

why is position not defined (if I delete it then my geolocation won’t work)?


#4

When I try it I get a different error:

index.html:42 Uncaught ReferenceError: getWeather is not defined
    at HTMLButtonElement.onclick (index.html:42)
onclick @ index.html:42

I believe it’s because the event listener is defined in the HTML whereas getWeather is a function local to $(document).ready. It’s out of scope. One way to fix it is to set up the event listener in $(document).ready.


#5

As @sfiquet mentioned your current code, you could add an event listener to the $(document).ready callback function. If you go this route, then you would need to remove onclick=“getWeather()” from the html section.

Another fix for your issue here is to not use the $(document).ready (and make sure to get rid of the the }); at the end of the JS code. This would allow you to keep your onclick=“getWeather()” in your html section. Going this route, you need to fix one other small problem in the following line:

if (navigator.geolocation) {navigator.geolocation.getCurrentPosition(showWeather());} 

You only need to reference the function showWeather and not execute the function as you are doing with the extra (); on the end. Simply change it to:

if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showWeather) }