Why can't I store this json variable in the window object and use it outside the function?

Question

I'm doing this Local Weather App for a FreeCodeCamp challenge. You can check my project over codepen at: https://codepen.io/Thiagoral/pen/jVjqwo

I get a JSON from DarkSky, then I store one of the ten possible weather conditions (clear-day, rain, snow etc) in the following fashion:

window.little_icon = json.currently.icon;

Outside the getJSON function, I'm trying to create a switch, in which I evaluate the window.little_icon key and set an icon to the canvas, according to the proper string value.

var icons = new Skycons({color: "#fff"});    

switch(window.little_icon) {
  case "clear-day":
  $("canvas").attr("id", "clear-day");
  icons.set("clear-day", Skycons.CLEAR_DAY);
  break;

  case "clear-night":
  $("canvas").attr("id", "clear-night");
  icons.set("clear-night", Skycons.CLEAR_NIGHT);
  break;

  case "rain":
  $("canvas").attr("id", "rain");
  icons.set("rain", Skycons.RAIN);
  break;

  case "snow":
  $("canvas").attr("id", "snow");
  icons.set("snow", Skycons.SNOW);
  break;

  case "sleet":
  $("canvas").attr("id", "sleet");
  icons.set("sleet", Skycons.SLEET);
  break;

  case "wind":
  $("canvas").attr("id", "wind");
  icons.set("wind", Skycons.WIND);
  break;

  case "fog":
  $("canvas").attr("id", "fog");
  icons.set("fog", Skycons.FOG);
  break;  

  case "cloudy":
  $("canvas").attr("id", "cloudy");
  icons.set("cloudy", Skycons.CLOUDY);
  break;  

  case "partly-cloudy-day":
  $("canvas").attr("id", "partly-cloudy-day");
  icons.set("partly-cloudy-day", Skycons.PARTLY_CLOUDY_DAY);
  break;

  case "partly-cloudy-night":
  $("canvas").attr("id", "partly-cloudy-night");
  icons.set("partly-cloudy-night", Skycons.PARTLY_CLOUDY_NIGHT);
  break;

}

icons.play();

This is not working though for some reason. I used the same tactic a little before, when I got the temperature inside the getJSON function with

window.temperature = Math.round(json.currently.temperature);

and I accessed it outside, when I was trying to do the Celsius/Fahrenheit conversion. I had no trouble accessing this temperature value outside its original function, but the same is not working with the json.currently.icon value.

If I create the switch inside the getJSON function, as exposed below, the icons display correctly.

  // Only the weather state and the temperature, whose unit depends on the client region, are inserted in their respective html div tags. The temperature is rounded down to eliminate decimal places
  $.getJSON(url,function(json){

    //Assigns the temperature to the window object, so it can be accessed outside of getJSON
   window.temperature = Math.round(json.currently.temperature);

    $("#weather").html(json.currently.summary);     
    $("#temperature").html(window.temperature);

    // Sets the background picture according to the weather described in icon
    var little_icon = json.currently.icon;
    // window.aff = json.currently.icon; 
    $("body").addClass(little_icon);

    // Skycon is set according to the icon stored in the json
var icons = new Skycons({color: "#fff"});    

switch(little_icon) {
  case "clear-day":
  $("canvas").attr("id", "clear-day");
  icons.set("clear-day", Skycons.CLEAR_DAY);
  break;

  case "clear-night":
  $("canvas").attr("id", "clear-night");
  icons.set("clear-night", Skycons.CLEAR_NIGHT);
  break;

  case "rain":
  $("canvas").attr("id", "rain");
  icons.set("rain", Skycons.RAIN);
  break;

  case "snow":
  $("canvas").attr("id", "snow");
  icons.set("snow", Skycons.SNOW);
  break;

  case "sleet":
  $("canvas").attr("id", "sleet");
  icons.set("sleet", Skycons.SLEET);
  break;

  case "wind":
  $("canvas").attr("id", "wind");
  icons.set("wind", Skycons.WIND);
  break;

  case "fog":
  $("canvas").attr("id", "fog");
  icons.set("fog", Skycons.FOG);
  break;  

  case "cloudy":
  $("canvas").attr("id", "cloudy");
  icons.set("cloudy", Skycons.CLOUDY);
  break;  

  case "partly-cloudy-day":
  $("canvas").attr("id", "partly-cloudy-day");
  icons.set("partly-cloudy-day", Skycons.PARTLY_CLOUDY_DAY);
  break;

  case "partly-cloudy-night":
  $("canvas").attr("id", "partly-cloudy-night");
  icons.set("partly-cloudy-night", Skycons.PARTLY_CLOUDY_NIGHT);
  break;

}

icons.play();

I could settle with this and consider this project done, but I really wanted to find out why I can't access this value outside the original function.