Failing to call openweatherapp API : what am I missing?

Here is the code from the codepen

Not sure why the “lat” variable is not updated after I call the API…

$(document).ready(function(){
  
  
  var api ="http://api.openweathermap.org/data/2.5/weather?q=London&APPID=5509e4d3e24ba333ea491217acad1d3d";
  var lat = "lat_initial";

  
  
  $.getJSON(api, function(data){
    
    alert("JSON OBTAINED!");
    lat = data.coord.lat;
   
  });

  
  
  $(".getLatBtn").on("click", function(){
  
    alert("BUTTON PUSHED!");
    $(".latitude").text(lat);
  
  });

Since June 1, all Codepens are served over HTTPS.

Because of CORS, your ajax call needs to get data from a HTTPS endpoint.
(More info: https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS)

Your var api needs to be https://api.openweathermap.org/data/2.5/weather?q=London&APPID=5509e4d3e24ba333ea491217acad1d3d instead of http://api.openweathermap.org/data/2.5/weather?q=London&APPID=5509e4d3e24ba333ea491217acad1d3d

This way the content will be fetched from a HTTPS endpoint and your var lat will display the correct latitude.

1 Like