Callback function not working in Weather App

1

Hi All!

I need help on callbacks.

I’m trying to get weather information based on a city location gathered from ip address.

I’m using two APIs to do this:

  1. ipapi.co - to grab the user’s city
  2. OpenWeatherMap.org - to grab the city’s weather

I’m trying to use a callback function to grab the city from one function to be used in the OpenWeatherMap API. Unfortunately, it’s not working. What am I doing wrong?

Here is my pen: https://codepen.io/yjaved/pen/qjKbrx?editors=1112

Cheers,
Yosef

2

The getCityWeather(city) call at the bottom throws an error because there’s no city variable in the local scope.

I think you want to call getCityWeather inside the getCity function. Then call getCity at the bottom instead.

The other problem is that codepen blocks HTTP requests (as is the case with the OpenWeather URL). IIRC you need to pay to be able to use their HTTPS version. You have some alternatives here:

  • Use the Dark Sky API. They support HTTPS out of the box.
  • Attach https://cors-anywhere.herokuapp.com/ at the beginning of your OpenWeather URL. Note that this is more of a short-term solution.

After all of that it’s only a matter of displaying weather data on your page.

3

Instead of writing $.getJSON you could instead do the $.ajax({}) command. It’s longer, but you can get around the http/https CORS issues by specifying datatype: jsonp, and it usually gives less problems when compared with the default $.getJSON command.

Also, when you call your function at the end, you just type getCityWeather(). You don’t need to write city inside the brackets.

1 Like
4

Thanks!

I switched over to Dark Sky API and I think I’ve done everything correctly, but still not getting the data to pop up.

I looked at my Dark Sky account and see that my calls did reach Dark Sky, but not sure why the data isn’t displaying. Any idea?

5

I ran your code and tried a couple things. There still seems to be a CORS issue with Darksky. It’s an easy fix though. I switched that call from .getJSON() to .get() with the third parameter ‘jsonp’ (I’m not completely clear on the difference… I think declaring it as ‘jsonp’ adds the callback behind the scenes and saves you a step).

The second issue I saw was trying to output the Darksky object directly to html. Instead, I JSON.stringify(ied) the data and sent to .text().

The below code works for me.

$(document).ready(function () {
  function getCityWeather(cityCoordinates) {
    $.get("https://api.darksky.net/forecast/67b712ca42b8a1c502ad5da0ab0c40e3/"+ cityCoordinates + "?exclude=minutely,hourly,daily,alerts,flags", function(jsonData){
      // console.log(jsonData.currently);
      $("#location").text(JSON.stringify(jsonData.currently));
    }, "jsonp");
  }
  
  function getWeather(){
    $.getJSON("https://ipapi.co/json/", function(jsonData){
      // console.log(jsonData);
      var cityCoordinates = jsonData.latitude +","+ jsonData.longitude;
      // console.log(cityCoordinates);
      getCityWeather(cityCoordinates);
    });
  }
  getWeather();
});
1 Like
6

Use navigator.geolocation.getCurrentPosition() to get the current gps location.
https://developer.mozilla.org/en-US/docs/Web/API/Navigator/geolocation
https://www.w3schools.com/html/html5_geolocation.asp

Use JSONP to access data from different server’s domain by adding callback=? at the end of the url.
http://api.jquery.com/jquery.getjson/

Because of javascript’s asynchronous behavior $.getJSON() must be inside navigator.geolocation.getCurrentPosition() to use coords.
https://www.pluralsight.com/guides/front-end-javascript/introduction-to-asynchronous-javascript

var url, coords;
if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function(position) {
    coords = position.coords.latitude + "," + position.coords.longitude;
    url = "https://api.darksky.net/forecast/67b712ca42b8a1c502ad5da0ab0c40e3/" + coords + "?callback=?";
    $.getJSON(url, function(json) {
      console.log(json);
    });
  });
} else {
  alert("Geolocation is not supported by this browser.");
}

Test the code here: https://jsbin.com/gomahoxafu/edit?js,console

2 Likes