Easiest way make API call using Javascript + jQuery

Question

I am trying to make an API call to Openweathermap using their API+key. I am unable to parse the data to a CSS ID using $.getJSON in Javascript.

This is the jsfiddle: https://jsfiddle.net/n1Lz3vf0/

Code:

var weatherData = "http://api.openweathermap.org/data/2.5/weather? 
q=Endicott,us&appid=API+KEY";

$.getJSON(weatherData, function(data){
var town = data.name;

document.getElementById('town').innerHTML = town;
});

And it outputs to a simple div tag

Obviously the end result will be far more involved and I will be parsing much more data, but in the jsfiddle, it should simply output my city name but it's not.

The JSFiddle link is HTTPS, and your code attempts to call a HTTP endpoint. Using OpenWeatherMap via HTTPS or JSFiddle via HTTP will work (or both). — Gabriel Negut
– Gabriel Negut, Commented Dec 21, 2018 at 16:03
My friend, that worked. Thank you. How did you know that was the problem? — Jay
– Jay, Commented Dec 21, 2018 at 16:04
If you open the console in the JSFiddle tab, you can see the following error: Mixed Content: The page at 'https://jsfiddle.net/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint. This request has been blocked; the content must be served over HTTPS. — Gabriel Negut
– Gabriel Negut, Commented Dec 21, 2018 at 16:05

Simon Arruti · Accepted Answer · 2018-12-21 16:05:24Z

1

You have a mixed content error on the jsfiddle page, because it's a https website and you're trying to call a http url in your API call. You can't call an external API using http if you're over https, the request is blocked.

I tried your request with https and it works just as expected.

answered Dec 21, 2018 at 16:05

Simon Arruti

3163 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jay Over a year ago

Thank you, like the other comment said, this was the problem. I was tearing my hair out.

Collectives™ on Stack Overflow

Easiest way make API call using Javascript + jQuery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related