Can't reach an API on the Local Weather project

Code Feedback
1

Hi everybody, I’m doing the local weather project,
Here is my code,

https://codepen.io/Ziratsu/pen/NjmYGp?editors=1111

i’m first focusing on the JS part, don’t mind the rest.

Well, as you can see I can reach the first API from the site “ipinfo”, so I got my location, but then when I try to reach the second from the site “openweathermap” I can’t log the information, but I’m seeing the object in the browser (http://api.openweathermap.org/data/2.5/weather?lat=43.5995&lon=1.4332&APPID=9647870628031df2c3882ada37ee848d)

In my code, in the second URL, i’ve put the location from the first one, plus I added the “ID” from “Openweathermap” which allow me to use their API.

Well I hope someone can help me, i’ve been on this 5hours long, no solution …
Thank’s if you take time to reply!

2

Hi,

your browser console explains what’s happening:
jquery.min.js:4 Mixed Content: The page at 'https://codepen.io/Ziratsu/pen/NjmYGp' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://api.openweathermap.org/data/2.5/weather?lat=45.5053&lon=-74.4690APPID=9647870628031df2c3882ada37ee848d'. This request has been blocked; the content must be served over HTTPS.

You cannot use/request an http Url on CodePen anymore.

Either use a different API or try to putting
https://cors-anywhere.herokuapp.com
in front of the API Url.

3

I’m struggling using the “cors-anywhere”, what should I do? I’m not english I don’t know what to change in my link ^^

4

Seriously, why they keep this challenge up and why using CodePen …

5

Sorry for not being clearer.
Write the cors-anywhere url first, then your API Url:
$.getJSON('https://cors-anywhere.herokuapp.com/http://api.openweathermap.org/data/2.5/weather?lat='+ loc[0] + '&lon=' + loc[1] +'APPID=' + API_KEY

6

Thank’s for trying to help mate, but it still ain’t working,

https://codepen.io/Ziratsu/pen/NjmYGp?editors=1111

7

Works for me after adding the cors-everywhere and a & in front of APPID
http://prntscr.com/fcurvl

8

Yeah great! It work thank you so much !
But why add an “&A” in front of APPID? What does it change? :slight_smile:

9

You are very welcome.
The & is needed to tell the API that it is a separate query parameter.
https://en.wikipedia.org/wiki/Query_string#Structure