Why can't I save json data for use outside the json function?

Why can't I save json data for use outside the json function?
0

#1

I’ve been struggling with this for weeks. It seems the only way I can make an api work is if I build everything inside the json api function, which is fine for the challenge, but I want to use two or three different api’s, and nesting them doesn’t work.

Why does the variable defined globally at the top not retain data saved to it in the function, and then logged out at the end?


#2

Because $.getJSON is asynchronous, other code outside the function will continue to execute until a response comes back from the API. When the response comes back, other code will “pause” and the callback function inside the $.getJSON call will execute. In your particular code, when the $.getJSON function is called, it does not wait until the response comes back, so other code after the $.getJSON code block will go ahead and execute. In this case, the other code is console.log(jsonWeatherData);

Since you declared jsonWeatherData at the top but did not initialize it with a specific value, it automatically gets the value undefined. At the time the console.log statement is processed, no response has come back yet from the weather API, so jsonWeatherData is still undefined which gets displayed to the console.

That is why you must make use of the jsonWeatherData inside the $.getJSON callback function. You can always call other functions inside the the $.getJSON callback function which use the jsonWeather, so you do not have to actually write all the logic inside the callback function. For example, you could do the following:

function doSomethingWithJSONData(data) {
  console.log(data); // displays weather data response
}

$(document).ready(function() {
  navigator.geolocation.getCurrentPosition(function(location) {
    //declare location variables
    var lon = location.coords.longitude;
    var lat = location.coords.latitude;

    //enter FCC weather API
    var fccApiUrl = "https://fcc-weather-api.glitch.me/api/current?lon=" + lon + "&lat=" + lat;
    $.getJSON(fccApiUrl, function(jsonWeather) {
      doSomethingWithJSONData(jsonWeather);
    });
  });
});

#3

Ah, okay. So this particular issue is kind of a quirk of jQuery. How would one use multiple api’s then? When I have tried nesting them, none of them work.


#4

It is not a jQuery quirk. It applies to any function which is asynchronous in JavaScript.

I would need to see how you have tried to nest them, to better explain what the problem is.


#5

Fair. By quirk, I just mean that basic javascript expectations don’t apply. So like, a quirk to me, a novice.

Is there some way to ‘import’ the json data for use outside the json function?


#7

This is basic JS: it’s not a quirk, it’s literally how JS works. JS has a single thread in which to do things: it does thing one after the other, straightway, so if you need to do something that takes time (eg any user input, requests to remote servers, interacting with the outside world, etc), you need to hold onto the values, which you do by using closures, which in practice means code that needs time happens inside callbacks.