Script not working when trying to getJSON from URL that I put lat & long data into

Question

As you can see here, my app doesn't work when I try to use the variables "latitude" and "longitude" (those variables should get the user's current latitude and longitude) in the URL that I am getting JSON from.

Below is my code

if (navigator.geolocation)
{
    navigator.geolocation.getCurrentPosition(function(position) {       
        var latitude = position.coords.latitude
        var longitude = position.coords.longitude
    })
}

$.getJSON("https://fcc-weather-api.glitch.me/api/current?lat=" + latitude + "&lon=" + longitude, function(json){
  var temp = json.main.temp
  var ftemp = (temp * 1.8) + 32
  var celsius = true
  var condition = json.weather[0].main
  var video;
  switch (condition)
    {
      case "Clouds":
        video = ""
        break;
      case "Rain":
        video = "https://gcs-vimeo.akamaized.net/exp=1523487613~acl=%2A%2F401800757.mp4%2A~hmac=d66772ad9d6530ff1af68ac1dc01fcf17db42cce48ff72eebf97cc2b34ec0dab/vimeo-prod-skyfire-std-us/01/2146/5/135733055/401800757.mp4"
        break;
      case "Sunny":
        video = ""
        break;        
    }    
  $("#myVideo").html("<source src='" + video + "' type='video/mp4'>")
  $("#condition").html(condition)
    $("#number").html(Math.round(temp) + "°C")
    $("#button").on("click", function(event){
    event.preventDefault()
    celsius = !celsius;
    if (celsius)
      {
        $("#number").html(Math.round(temp) + "°C")
        $("#button").html("(Switch to °F)")
      }
    else
      {
        $("#number").html(Math.round(ftemp) + "°F")    
        $("#button").html("(Switch to °C)")
      }
  })
  })

But before I added the upper "if portion" and before I tried putting the variables into the URL, the app worked just fine, so the issue is somewhere in these few lines below.

if (navigator.geolocation)
{
    navigator.geolocation.getCurrentPosition(function(position) {       
        var latitude = position.coords.latitude
        var longitude = position.coords.longitude
    })
}

$.getJSON("https://fcc-weather-api.glitch.me/api/current?lat=" + latitude + "&lon=" + longitude, function(json){

Answer 1

Your variables are going out of scope:

if (navigator.geolocation)
{
    navigator.geolocation.getCurrentPosition(function(position) {       
        var latitude = position.coords.latitude
        var longitude = position.coords.longitude
    })
}

You need to declare the variables outside of that inner function:

var latitude, longitude;
if (navigator.geolocation)
{
    navigator.geolocation.getCurrentPosition(function(position) {       
        latitude = position.coords.latitude
        longitude = position.coords.longitude
    })
}

Oh, and you'll need to wait until you have gotten the coordinates, so you should wrap your getJSON call in a function, and then call it after you have the variables.

navigator.geolocation.getCurrentPosition(function(position) {       
    latitude = position.coords.latitude
    longitude = position.coords.longitude
    doAjaxRequest();
})