Pass data out of $.getJSON request in Javascript Function [duplicate]

63
December 23, 2018, at 11:00 PM

This question already has an answer here:

  • How do I return the response from an asynchronous call? 33 answers

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.

Answer 1

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.

READ ALSO
How to add manifest.json to html with parcel.js bundler?

How to add manifest.json to html with parcel.js bundler?

I am using Parceljs to bundle my files

24
TypeORM, update query in one to many relationship

TypeORM, update query in one to many relationship

How can I update an one to many relationship? I have this two tables:

77
Django-taggit query objects if the tag field contains 2 or more elements?

Django-taggit query objects if the tag field contains 2 or more elements?

I'm wondering how to query multiple tags through taggitI'm currently using django-taggit

83
HTML/CSS: Relative/Absolute Positioning

HTML/CSS: Relative/Absolute Positioning

How do I lay an image (such as a circle) over a different image so that it always stays in the right place, regardless of image or browser resizing? Is there a way I can do this with divs?

64