This is the last project I need for the front end development certificate and I cannot seem to figure out what is wrong. Any help would be greatly appreciated
https://codepen.io/michaelthompson312/pen/gGZpmR?editors=1111
Codepen is https, while your freegeoIP api is over http. Causes this problem: https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content
Do you have a specific part of the project that you are looking for help with?
gathering the data from the api. I do not under the http vs https. I understand it is a security thing but cannot seem to get the api working
I just tried replacing your URL with the a straight forward London search (api.openweathermap.org/data/2.5/weather?q=London) and adding my API key and it worked fine on your CodePen project.
Have you double checked your API key is correct?
You’re on the right lines!
How do I get my api key?
If you’re running into the HTTP/HTTPS request issue this can be fixed by requesting the response as JSONP rather than plain JSON.
JSONP (with padding) resolves the security issue with Codepen being HTTPS and the API being plain HTTP.
1 Like
Go to openweathermap.org, and at the top sign up with an account. Under your account page you can register a new api key. Just make sure you add your key to your url using the appid= parameter.
const apiKey = aehgaegphaepigaephgpiaehigpa
const url = `api.openweathermap.org/data/2.5/weather?q=London&appid=${apiKey}`
replacing the nonsense I added.
Also, a workaround the https problem. If your website is using an encrypted connection (https), the openweathermap api is not secured (http), so you will get an error. You can pass your api through a proxy: https://cors-anywhere.herokuapp.com/. The url would look like this:
https://cors-anywhere.herokuapp.com/http://api.openweathermap.org/data/2.5/forecast?q=London&appid=aeghaeuohgoaehgouaehog
1 Like
Ah I assume you were using the standard one they gave you?
Sorting this out will help your project massively!
You are running into a multitude of annoying errors that can make this project extremely frustrating - but a great learning experience.
First of all, looking at your project, there is no such thing as $.getJSONP, just $.getJSON.
Secondly, to get the request to work, you either need to use the CORS proxy I gave you, or you need to use JSONP correctly (I will explain later).
Thirdly, your first $.getJSON isn’t even calling the right URL so nothing inside it will work. You are calling the apikey instead of an actual url.
Fourth, you are doing two calls to the api at the same time. It takes time - milliseconds, sometimes even seconds - for these calls to return with data. You cannot expect to call these one after another as JavaScript is asyncronous.
Ok, because of all these things it can be overwhelming to try to fix all at once, so let’s start by just trying to get the data before trying to get the temperature and all that fancy stuff. Let’s do a basic one first before adding lat and lon. Start with just one getJSON, and make sure you are using the url variable not the key variable.
const key = 'c10a4e49d8c34dcb0fd70dc4f0d1dc06'
const url = 'https://cors-anywhere.herokuapp.com/http://api.openweathermap.org/data/2.5/forecast?q=London&appid=' + key
$.getJSON(url, function (data) {
console.log(data)
})
I made this on your pen, and it worked fine. In your pen, make your variable correct, and try using the cors proxy, and it should give you the data in the console. Now, try to figure out how to make use of this data. I’ll let you give it a go, definitely ask for help if you get stuck again. If you try to do multiple getJSON requests, and run into problems, I’ll give you some resources though that should help you understand the asynchronous problems you are having:
https://www.thenetninja.co.uk/courses/asynchronous-javascript-tutorial
As to the JSONP discussion. To use JSONP, you need to add &callback=? to the end of your url. This will prevent the CORS (Cross-Origin Resource Sharing) error from coming up. However, it will not stop the security error of http and https. Using the CORS proxy will not only stop the CORS error, it will also give you the data over https, which is what you need for codepen. There are caviats with this approach. First off, you are relying on another server to get you your data correctly. Besides security concerns, if this server goes down, so does your app. However, for this project, I think using the CORS proxy is the way to go. This approach let’s you completely circumvent the issue, and it let’s you learn how to use AJAX just like you would in a real software application.
1 Like
Thank you very much for the detailed response. It really means a lot and helped clear things up.
1 Like