Weather App API Call

1

Hello, I’m having issues with my weather app lately. It worked fine before but now it’s giving me a “failed to load response data” error. I used an API to grab the current location of a user synchronously and use the location info with the weather API to grab the current weather of that location. Any help is appreciated.

$(document).ready(function() {
  var city;
  var state;
  var temp_f;
  var temp_c;
  var condition;
  
  // Get user location method using an API
  var data = $.parseJSON($.ajax({
    url: "http://www.ip-api.com/json",
    dataType: "jsonp",
    async: false
  }).responseText);
  city = data.city;
  state = data.region;
  $("#locationText").html(city + ", " + state);
  
  ("#locationText").html(data.city);
  
  var url = "http://api.openweathermap.org/data/2.5/weather?q="+city+"&appid=0df1207a9bd654f5403eaca4b23b4bb1";
  
  $.ajax({
    url: url,
    dataType: "json",
    success: function(data){
      temp_f = Math.round(1.8 * (data.main.temp - 273 ) + 32) + "° F";
      temp_c = Math.round(data.main.temp-273.15) + "° C";
      $("#weather").html(temp_f);
      condition = data.main;
      $("#condition").html(condition);
      if (condition === "Clouds") {
        $("body").css({"background-image" : "url(https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcR4H1d6_9Jk9BKnd_0CKrLHlXfD77cvMrgBw69yWDbN-J2uaPVT)",
                      "background-repeat" : "no-repeat"});
      }
    }
  });
  
  
  $("#toggle").click(function() {
    var text = $("#weather").text();
    $("#weather").text(text == temp_f ? temp_c : temp_f);
  });
  
});
2

Which line is it? Is is for the data or weather response. I would suggest console.log(); to find out whats going on. I’m not sure your are loading anything in var data.

3

The problem appears to be in your first ajax call:

  var data = $.parseJSON($.ajax({
    url: "https://www.ip-api.com/json",
    dataType: "jsonp",
    async: false
  }).responseText);

Is there a reason why this has to be synchronous? I’ve always been warned against that. I get the following errors in my console:

jQuery.Deferred exception: Unexpected token u in JSON at position 0 SyntaxError: Unexpected token u in JSON at position 0
    at Function.parse [as parseJSON] (<anonymous>)
    at HTMLDocument.<anonymous> (pen.js:16:16)
    at j (https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js:2:29948)
    at k (https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js:2:30262) undefined

Uncaught SyntaxError: Unexpected token u in JSON at position 0
    at Function.parse [as parseJSON] (<anonymous>)
    at HTMLDocument.<anonymous> (VM116 pen.js:9)
    at j (VM135 jquery.min.js:2)
    at k (VM135 jquery.min.js:2)
(anonymous) @ VM116 pen.js:9
j @ VM135 jquery.min.js:2
k @ VM135 jquery.min.js:2

GET https://www.ip-api.com/json?callback=jQuery31101153509862189721_1499277285274&_=1499277285275 net::ERR_CONNECTION_REFUSED
4

Well, I believe it has to be synchronous so that the data can be used for the second call (weather API). Otherwise, the data (location) will be lost and grabbing the weather from the user’s location wouldn’t be possible.

5

For mine, I used the following:

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

    // rest of code within the callback...

  }

Though it no longer works in codepen, it works fine locally. As I understand it, some apis are rejecting calls from codepen (and others) now. They probably are getting overwhelmed with millions of coders trying things out over and over.

1 Like
6

There are ways around the synchronous/asynchronous problem. JS is an inherently asynchronous language and trying to force it to be synchronous is not a great idea. Try using callbacks, promises, etc.

2 Likes
7

You can give this API an try. https://www.wunderground.com/ Its very much organized and easy to parse the data. There are no location hassles also.

9

Hi ,
I have a problem with weather app project. Because is on http and not https it’s not consoloe.log the data i need . Is there any solution ?

Thanks