How do you work with multiple json APIs in the same code?

JavaScript
1

I’m on my second time going through the Javascript course, and I’ve gotten to the weather app for the front-end development projects. I found it super easy this time around, so I wanted to dress it up and do something more challenging. So, I’m using the supplied FCC weather API, but I’m also trying to use a couple of Google APIs to pull in a photo from nearby, and I’ve run into a problem.

I can’t get the API’s to work when they’re nested inside each other like:

//enter FCC weather API
  var fccApiUrl = "https://fcc-weather-api.glitch.me/api/current?lon="+lon+"&lat="+lat;
  $.getJSON(fccApiUrl, function(jsonWeather) {
    
    //enter google places awareness API
    var googPlaceAPI = "https://maps.googleapis.com/maps/api/place/nearbysearch/json?   location="+lat+","+lon+"&radius=200&key="+gApiKey;
    
    $.getJSON(googPlaceAPI, function(jsonPlace) {
     
      //enter photo result awareness API
      var googPhotoAPI;
      $.getJSON(googPhotoAPI, function(jsonPhoto) {

I originally tried to contain these API calls in their own self contained functions, but even if when declared global variables, the information written into the variables from inside those functions aren’t accessible from outside. So, I tried nesting the API functions, which worked at first, but it seems parent API calls are lost after the next API is introduced.

What am I failing to understand here? I figure I should be able to ‘save’ the json data into a local object, but I can’t figure out how to do it…

I would love someone to school me on this.

2

Can you post your full code via codepen?

3

Well, unfortunately no. I’ve blown it up a few times, and now I don’t have complete code from my code on either attempt.

4

Any general help available on this? Why can’t json functions save data into global variables? I’m making no progress and struggling to understand how to search for help…

5