Having problems with API/jQuery

Here’s my codepen: https://codepen.io/Bahnzo/pen/KWpzjj

I’ve been told the alert box pops up for others, but for me, it won’t. It’s something with the $.getJSON() request. If I put a generic alert(“Pop Up!”); in the JSON call, it also won’t pop up, but if I move it outside of the call, it works fine.

I’m really stumped here. I can open the “http://freegeoip.net/json/” in my browser and see the JSON data just fine, so that doesn’t seem it.

Any idea what’s going on here? I’d really like to use this site for location data.

When you connect to CodePen via HTTPS, you must use only HTTPS connections in JavaScript. Your API is hosted via HTTP. Stick a CORS proxy on your URL and it should work fine, like https://cors-anywhere.herokuapp.com.

https://cors-anywhere.herokuapp.com/http://freegeoip.net/json/

However, if you’re trying to get location information from this API, as the name might suggest, you really ought to use the browser’s geolocation API.

2 Likes

Alternatively, you can just remove the ‘s’ from ‘https’ :slight_smile:

Ok, so the https works. But this wouldn’t work when running it locally as well. Same rules apply?

But…the site also can be opened securely as well “https://freegeoip.net/json/” but I tried that and wouldn’t work.

No. Don’t do this. So many bad. Such awful.

Yup.

I just tried it and it worked for me, but there are some reason why it might not even if you’re just using secure protocols. The browser’s native geolocation service won’t have this problem, though.

I get that, but I’m trying to avoid having the user have to allow that. This is for the “Show the Local Weather” part of the course, and a city, state is good enough info to allow me to get weather data.