Pass data out of $.getJSON request in Javascript Function

Question

I have a $.getJSON request pulling data from an API. I need to pull data from that request to be used outside of it. Here's the code:

  var weatherData = "http://api.openweathermap.org/data/2.5/weather?q=Location,us&appid=APIkey";

  $.getJSON(weatherData,function(data){
    var icon = data.weather[0].icon;
  });


  var skycons = new Skycons();
  var conditions  = [
        "clear-day", "clear-night", "partly-cloudy-day",
        "partly-cloudy-night", "cloudy", "rain", "sleet", "snow", "wind",
        "fog"], i;
  var icons = ["01d", "01n", "02d", "02n", "03d", "09d", "13d", "50d"];

  if (icon == "03n" || icon == "04d" || icon == "04n")
    icon = "03d";
  if (icon == "09n" || icon == "10d" || icon == "10n" || icon == "11d" || icon == "11n")
    icon = "09d";
  if (icon == "13n")
    icon = "13d";
  if (icon == "50n")
    icon = "50d";


  for(i = conditions.length; i--; )
    skycons.set(conditions[i], conditions[i]);

  skycons.play();

The problem is, obviously, I need to be able to access "var icon = data.weather[0].icon;" outside of that $.getJSON request.

I understand jQuery is asynchronous. I've read every relevant question on here and I can't make sense of the answers. Please make it as simple as possible.

Work with it inside the request callback. Just move all the `skycons` code inside it — charlietfl, Dec 22 '18 at 22:31
No...not the whole library...just the code shown in question starting with `var skycons = new Skycons();` — charlietfl, Dec 22 '18 at 22:36
The variables could be set before that but the processing of `icon` needs to be done once `icon` is received inside the callback — charlietfl, Dec 22 '18 at 22:42
Thank you for the help @charlietfl I had all the code within the $.getJSON request before but I had not properly organized the code to output the proper icon. — Jay, Dec 22 '18 at 22:56

score 0 · Answer 1 · answered Dec 22 '18 at 22:58

In case someone comes across my code and is also using Skycons, this is how I incorporated Openweathermap's API to display the corresponding Skycon based on my location's current weather condition

      var weatherData = "http://api.openweathermap.org/data/2.5/weather?q=Location,us&appid=APIkey";

      $.getJSON(weatherData,function(data){
        var icon = data.weather[0].icon;

        var skycons = new Skycons();
        var conditions  = [
              "clear-day", "clear-night", "partly-cloudy-day",
              "partly-cloudy-night", "cloudy", "rain", "sleet", "snow", "wind",
              "fog"], i;
        var icons = ["01d", "01n", "02d", "02n", "03d", "09d", "13d", "50d"];

        if (icon == "03n" || icon == "04d" || icon == "04n")
          icon = "03d";
        if (icon == "09n" || icon == "10d" || icon == "10n" || icon == "11d" || icon == "11n")
          icon = "09d";
        if (icon == "13n")
          icon = "13d";
        if (icon == "50n")
          icon = "50d";

        icon = icons.indexOf(icon);
        icon = conditions[icon];


        document.getElementById("test").innerHTML = "<canvas id=\"" + icon + "\"></canvas>";
        
        for(i = conditions.length; i--; )
          skycons.set(conditions[i], conditions[i]);

        skycons.play();
      });

I simplified the possible icon codes and removed 2 Skycon conditions (sleet and wind) to better match the icon codes of Openweathermap's API.

Pass data out of $.getJSON request in Javascript Function

1 Answers1