[WeatherApp][getJSON] What's the difference between these two?

1

FYI Trial 1 does not work, but Trial 2 works.

I understand that getJSON is executes asynchronously, but I don’t actually understand how it applies to the code I’ve written.

What can I learn about asynchronous execution from this?

Why do I have to separate the getJSON call into a function separate from ready()?

FOR TRIAL 2 SPECIFICALLY:
How can I write this code so I don’t have to initialize functions inside of getJSON?
If there isn’t a way, how can I write this code to be more robust?

/*
//TRIAL 1
$(document).ready(function(){
  console.log("loaded");
  $.getJSON(url, function(json){
    var fahrenheit = true;
    getLocation(json);
    getTemperature(fahrenheit, json);
    $("#unit").on("click", function(){
      fahrenheit = !fahrenheit;
      getTemperature(fahrenheit, json);
    });
    getWeather(json);
  });
});

//Gets current weather conditions from current_observation
function getWeather(json){
  var currWeather = "";
  var iconURL = "";
  currWeather=json.current_observation.weather;
  iconURL=json.current_observation.icon_url;
  $("#icon").attr("src", iconURL);
  $("#weather").html(currWeather);      
};

//Gets current temperature from current_observation  
function getTemperature(fahrenheit, json){
  var currTemp = 0;
  if(fahrenheit){
    currTemp+=json.current_observation.temp_f;
    currTemp+="&#8457";
  } else{
    currTemp+=json.current_observation.temp_c;
    currTemp+="&#8451";
  }
  $("#temperature").html(currTemp);
};

//Gets city, state, country, zip, latitude, and longitude from location
function getLocation(json){
  var currLocation=["city", "state", "country", "zip", "lat", "lon"];
  var locationHTML = "";
  currLocation[0] = json.location.city;
  currLocation[1] = json.location.state;
  currLocation[2] = json.location.country_name;
  currLocation[3] = json.location.zip;
  currLocation[4] = json.location.lat;
  currLocation[5] = json.location.lon;
  locationHTML += currLocation[0]+", "+currLocation[1]+", "+currLocation[2]+" " +currLocation[3]+"<br>";
  locationHTML += "Latitude: "+currLocation[4]+"<br>Longitude: "+currLocation[5];
  $("#location").html(locationHTML);
};
*/

//TRIAL 2

$(document).ready(function(){
  console.log("loaded");
  dispWeather(); 
});

function dispWeather(){
  console.log("inside dispWeather");
  //Retrieve json from weather underground
  var url = "https://api.wunderground.com/api/19c5c96f0b140c0f/geolookup/conditions/q/autoip.json";
  $.getJSON(url, function(json){
    console.log("Got JSON");
    console.log(json);
    var fahrenheit = true;
    getLocation(json);
    getTemperature(fahrenheit, json);
    $("#unit").on("click", function(){
      fahrenheit = !fahrenheit;
      getTemperature(fahrenheit, json);
    });
    getWeather(json);

    //Gets current weather conditions from current_observation
    function getWeather(json){
      var currWeather = "";
      var iconURL = "";
      currWeather=json.current_observation.weather;
      iconURL=json.current_observation.icon_url;
      $("#icon").attr("src", iconURL);
      $("#weather").html(currWeather);      
    };

    //Gets current temperature from current_observation  
    function getTemperature(fahrenheit, json){
      var currTemp = 0;
      if(fahrenheit){
        currTemp+=json.current_observation.temp_f;
        currTemp+="&#8457";
      } else{
        currTemp+=json.current_observation.temp_c;
        currTemp+="&#8451";
      }
      $("#temperature").html(currTemp);
    };

    //Gets city, state, country, zip, latitude, and longitude from location
    function getLocation(json){
      var currLocation=["city", "state", "country", "zip", "lat", "lon"];
      var locationHTML = "";
      currLocation[0] = json.location.city;
      currLocation[1] = json.location.state;
      currLocation[2] = json.location.country_name;
      currLocation[3] = json.location.zip;
      currLocation[4] = json.location.lat;
      currLocation[5] = json.location.lon;
      locationHTML += currLocation[0]+", "+currLocation[1]+", "+currLocation[2]+" " +currLocation[3]+"<br>";
      locationHTML += "Latitude: "+currLocation[4]+"<br>Longitude: "+currLocation[5];
      $("#location").html(locationHTML);
    };
  })
};
2

I really want to know the answer to this… Bump.

3

I’m not sure if it’s the problem, but I copied your code and just added
var url = "https://api.wunderground.com/api/19c5c96f0b140c0f/geolookup/conditions/q/autoip.json";
to your first trial and it worked here :grin: