Variables under getJSON in my Weather App are not working

1

For some reason, the variables under getJSON in my JavaScript code on CodePen are not working. I tried changing different things, but nothing solved the problem.
I am using Chrome and the https domain.
CodePen Project
For example, the following code is not showing any results

        console.log(city);
        console.log(data.main.temp);
        console.log(kTemp);
2

You are opening codepen in https. Notice the message in console - “Mixed Content: The page at ‘https://codepen.io/ImedAdel/pen/rjPWWb’ was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint …”

That works for the navigator.geolocation but it is confounding you openweathermap call.

I solved this by opening codepen in http and using this to get the lat and lon:

  $.getJSON("http://ip-api.com/json", function (data) {
    lat = data.lat;
    lon = data.lon;
    ...
1 Like
3

I agree with @ksjazzguitar, you are running your codepen on https but open weather is http. You can use run codepen on http and use what was suggested, or you can use forcast.io which is also https.

4

Thank you for your suggestion. I tried applying this solution, however, it is not working on CodePen. I tried it in my browser console and it’s working fine.

$(document).ready(function() {
  var long;
  var lat;
  $.getJSON("http://ip-api.com/json", function (data) {
    long = data.lon;
    lat = data.lat;
    var api = "http://api.openweathermap.org/data/2.5/weather?lat="+lat+"&lon="+long+"&appid=4779b1330add946777c991e19bc9471f";
    console.log(api);
      $.getJSON(api, function(data){
        var kTemp = data.main.temp;
        console.log(data.main.temp);
        console.log(kTemp);
      });
    });
});

I thought the problem was using two nested JSON calls, so I made another CodePen pen. It is also not working on the website, but it’s working completely fine the browser console.

$(document).ready(function() {
  $.getJSON("http://ip-api.com/json", function (data) {
      var lat = data.lat;
      var lon = data.lon;
      console.log(lat);
  });
});

Do you have any suggestions?

5

The problem with this website is that it allows a maximum of 1000 forecasts per day. What if I exceed that number?

6

Thank you, everyone. I tried remaking the whole pen using http CodePen on Firefox and it is working perfectly.

7

The issue isn’t the browser but that you’re trying to call a non-secure protocol from a secure one. The codepen you linked works not because of Firefox but because it is http.