Weather App Not Getting Requests

Hello Guys, I just started the weather app a few days ago. the Ajax functions in my code are not getting responses from their API. I am so clueless on how to solve this because google console doesn’t return any errors. Please guys I really need your help

Here is my code:

$("weatherButton").on("click", function() {

  function getCurrentPos() {

     $.ajax({
       type: "GET",
       datatype: "json",
       url: "https://freegeoip.net/json/",
       success: function(data) {
       getCurrentWeather(data);
      }
   });
}

 function getCurrentWeather(pos) {
    $.ajax({
       type: "GET",
       datatype: "json",
       url: "http://api.apixu.com/v1/current.json?key=7e8c103c40e74b8dab0164810170903&q=" + pos.latitude + "," + pos.longitude,
      success: function(data) {

          var location = data.location.name;
          var weather = data.current.temp_c;

         $("#weatherReport").html("<p> Location - " + location + "<br> Current Weather - " + weather + "°C</p>");

      },
     cache: false,
   });
  }

 function main() {
   getCurrentPos().then(getCurrentWeather);
  }

});

Shouldn’t it be position.coords.latitude ?

Hi john,

I won’t copy-paste the solution, but I’ll tell you a couple of things:

  1. I guess the first $ selector is wrong

  2. you can declare the function out of the click’s callback, it’s more tidy, then in the callback just call the first function you need

  3. you are doing two different api calls, one over HTTP and the other over HTTPS… problems with cross-site requests

  4. you don’t need the “main” function at all

I hope this will help you!

Yeah you are absolutely right. Thanks a lot. I just have one more question about number 3. How do I make both Api calls work together when the click function is called

I am using an IP API to obtain the current latitude and longitude coordinates

You can just change the http one to https.

1 Like