Local Weather - toggle

Hi! Yet another question about the local weather toggle feature!

My .click function won’t work inside my getJSON request (not sure why) but outside I can’t access the temperature values. I’m sure there’s an easy answer, but I’ve been working on this for too long. Anyone have a suggestion?

Here’s my code:

Thank you!

Only your <h4> is currently loading.
Even after I disabled my “HTTPS Everywhere” plugin.
You’re having API issues. Yours doesn’t begin with “https,” for one.
Also, TypeError at line 20: cannot read property ‘temp’ of undefined.
JSON/API challenges are the most difficult, in my opinion. I still need to re-do 2 of mine before going for my Front End cert.

1 Like

Here’s the conundrum: browser geolocation won’t work if your site isn’t hosted securely (http), and if your site is hosted securely (https), then it will reject data from OpenWeather’s API because it’s not secure. I think the best way to fix this problem is - don’t panic here - use a different weather service. I suggest DarkSky, but there are other good ones too. Sign up, get a new API key, and I promise you won’t have to change much of your existing code.

1 Like

Thanks for the feedback. I thought I had miraculously avoided this problem that I saw everyone else posting about, as it runs fine for me! Back to the drawing board…

So if I understood correctly, the problem you are pointing out has to do with the link I shared. Using http://codepen.io/AlannaL/pen/egmKoQ/ instead should solve this problem, right?

If so, fingers crossed, then I still have my original question about how to access the variables that are inside the navigation request. Is there a way to make my current strategy work, or do I need to think of another way to toggle the info?

Could you please clarify what the error is on line 20? My code works well, I don’t see the problem…

Hehe. Posting the link for my weather app (it’s kinda ridiculous) as “http” was what I did for a long time, but it doesn’t fix the problem. Finally switched over to Dark Sky yesterday.

The TypeError is no longer an issue, but console reads “getCurrentPosition() and watchPosition() no longer work on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS…,” so it really all comes back to the necessity of using a different weather service. I actually found Dark Sky’s documentation easier to deal with than OpenWeather’s, or maybe I’m just better at this stuff than I was a few months ago.

I also found out about this cross-origin URL you can add to the beginning of your API URL (“https://cors-anywhere.herokuapp.com/”) that prevents security issues with Chrome browsers, specifically.

1 Like

Thanks a lot! I’ll look into this…

I only just now saw your fully loaded page. Amazing! :heart_eyes:

Thank you so much. :tulip: