Weather API project - not sure why get Request isn't working

1

I want to get this out of hte way first(working with teh API)

so what gives? why doesn’t it work? in my getWeather function thats implemented in succes() function, shouldn’t it send the request and off it goes? I receive the lat and long properly so i’m unsure. The console logs don’t show up so I’m assuming it isn’t running through.

Thx.

2

You must be looking at a different console than I am because I have a “Mixed Content: The page at ‘https://codepen.io/AeriaGlorisia/pen/eWvmmq’ was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint” error in mine. (There is a console on codepen, but that doesn’t show all of the errors - the browser console does.)

Here’s what I wrote on a post with a similar problem:

++++++++++++++

Looking in the Chrome console, I see that you’re getting a “mixed content” message. You’re trying to call openweathermap from your https codepen. Bad coder! The problem (in my limited understanding) is that openweathermap doesn’t accept calls from https. You could use your pen on http, but then (as I understand it) navigator.geolocation.getCurrentPosition won’t work because it doesn’t like http. (I know, makes me want to scratch my eyes out too.)

So, you either have to change everything to http or https. You can get your coords on http on ip-api.com or I think Dark Sky API works on https if you want.

I chose the former route:

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

    /*
     * more code
     */

If you call your codepen over http, that should work.

I’m sure there is a better solution, but it’s late and I wasn’t sure if you were going to get an answer tonight. I have an image of you shivering in your underwear staring at the screen with bloodshot eyes, waiting for a response. I know I’ve been there.

This seems to work:

function use_api(lat, lon){
    var api_key = '8a7759132e2cad3a28a84ec1abf616fd';
    $.ajax({
        url: 'http://api.openweathermap.org/data/2.5/weather?lat=' + lat + '&lon=' + lon + '&APPID=' + api_key,
        success: function(data){
            display_info(data);
        }, //end of success function
        error: function(data){
          console.log(data);
        }  //end of error function
    })  //end of ajax
};  //end of use_api

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

});

Just remember to change your codepen url to http in the address bar.

Yeah, APIs drive me crazy too.

++++++++++++++

You’ll have to adjust it to your needs, but you get the idea.

1 Like
3

Info on accessing browser consoles:

4

Thanks alot! It’s late here and I have to wake up early tomorrow, i’ll try implementing this tomrorow afternoon and see how it goes :smiley:

5

Hi, I thought you might still need a good url, here it goes , cheers!:

$.getJSON("//freegeoip.net/json/?callback=?", function(data) {
console.log(data);
});