CODEWITHSUNDEEP
javascriptjsonfrontend
TugRulz
TugRulz

Reputation: 65

$.getJson fails although the weatherapp link works correctly

I'm doing the project in https://www.freecodecamp.com/challenges/show-the-local-weather

My full project is here if you need: https://codepen.io/tugrulz/pen/beEmJb?editors=0010

function fetchWeather() {

  var ap = "http://api.openweathermap.org/data/2.5/weather?";
  var key = "&appid=061f24cf3cde2f60644a8240302983f2";
  var lat = "35";
  var lon = "139";
  var api = ap + "lat=" + lat + "&lon=" + lon + key;

  $(".location").html(api);

$.getJSON(api, function(data) {
      alert("sa");
      $(".location").html("oldu mu?");
    })
   .done(function() {
    alert( "second success" );
  })
  .fail(function(error) {
    alert( error );

  })
  .always(function() {
    alert( "complete" );
  });
}

This prints: http://api.openweathermap.org/data/2.5/weather?lat=35&lon=139&appid=061f24cf3cde2f60644a8240302983f2

The problem is, the link I print works in chrome correctly but the getJSON does not work. Its fail function works.

What should I do? And any idea how do I print the error message? print(error); does not help. neither a try and catch statement involving getJson.

Upvotes: 0

Views: 55

Answers (1)

j_buckley
j_buckley

Reputation: 1936

I ran your codepen project and in my console I got the error 

The page at 'https://codepen.io/tugrulz/pen/beEmJb?editors=0011' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://api.openweathermap.org/data/2.5/weather?lat=35&lon=139&appid=061f24cf3cde2f60644a8240302983f2'. This request has been blocked; the content must be served over HTTPS.

Codepen is blocking the api because it is not an https address. It's not printing an error because the request is never even getting sent to the weather service.

Upvotes: 0

Related Questions