How to call a nested function from within his parent in JavaScript

Question

For school purposes I am supposed to use IP-API and OpenWeatherMap to show the weather from my current location. Unfortunately I can't work it out.

There seems to be an error in my JavaScript

I want to call function showWeather from within initPage, but can't figure out how to do so. I also need to use the lat, long and city values from the IP-API when calling showWeather.

Can anyone help me out?

function initPage() {
  $.get("http://ip-api.com/json", function(data) {
    $("#code").text(data.countryCode);
    $("#country").text(data.country);
    $("#region").text(data.regionName);
    $("#city").html(data.city);
    $("#postalCode").text(data.zip);
    $("#latitude").text(data.lat);
    $("#longitude").text(data.lon);
    $("#ip").text(data.query);

    var lat = data.lat;
    var lon = data.lon;
    var city = data.city;

  });

  function showWeather(latitude, longitude, city) {
    $.get("api.openweathermap.org/data/2.5/weather?lat=" + latitude + "&lon=" + longitude + "&appid=xxxx", function(data) {
      $("#temp").text(data.main.temp - 273);
      $("#humid").text(data.main.humidity);
      $("#wSpeed").text(data.wind.speed * 3.6);
      $("#wDeg").text(data.wind.deg);
      $("#sunUp").text(data.sys.sunrise);
      $("#sunDown").text(data.sys.sunset);
      $("#cities").text(city);
    });
  };

  function loadCountries() {
    // call REST service here
  };


  this.showWeather(lat, lon, city);

}

$(document).ready(initPage());

body {
  background-color: rgb(214, 212, 204);
}

#myLocation h1,
#myWeather h1 {
  background-color: rgb(160, 153, 141);
  color: rgb(255, 255, 255);
  padding: 5px;
}

#myVacations h1 {
  background-color: rgb(160, 153, 141);
  color: rgb(255, 255, 255);
  padding: 5px;
  width: 100%;
}

#myLocation,
#myWeather {
  display: inline-block;
  width: 45%;
}

h1 img {
  float: right;
}

.lItem label {
  display: inline-block;
  width: 100px;
}

.wItem label {
  disply: inline-block;
  width: 500px;
}

<script src="https://code.jquery.com/jquery-3.2.0.min.js"></script>

<div id="frame" /></div>
<div id="myLocation">
  <h1>Mijn Locatie</h1>
  <div class="lItem"><label>Landcode: </label><span id="code"></span></div>
  <div class="lItem"><label>Land: </label><span id="country"></span></div>
  <div class="lItem"><label>Regio: </label><span id="region"></span></div>
  <div class="lItem"><label>Stad: </label><span id="city"></span></div>
  <div class="lItem"><label>Postcode: </label><span id="postalCode"></span></div>
  <div class="lItem"><label>Latitude: </label><span id="latitude"></span></div>
  <div class="lItem"><label>Longitude: </label><span id="longitude"></span></div>
  <div class="lItem"><label>IP: </label><span id="ip"></span></div>
</div>
<div id="myWeather">
  <h1>Het weer in <span id="cities"></span></h1>
  <div class="wItem"><label>Temperatuur: </label><span id="temp"></span></div>
  <div class="wItem"><label>Luchtvochtigheid: </label><span id="humid"></span></div>
  <div class="wItem"><label>Windsnelheid: </label><span id="wSpeed"></span></div>
  <div class="wItem"><label>Windrichting: </label><span id="wDeg"></span></div>
  <div class="wItem"><label>Zonsopgang: </label><span id="sunUp"></span></div>
  <div class="wItem"><label>Zonsondergang: </label><span id="sunDown"></span></div>
</div>
<div id="myVacations">
  <h1>Beschikbare vakantiebestemmingen</h1>
  <table>
    <tr>
      <th>Land</th>
      <th>Hoofdstad</th>
      <th>Regio</th>
      <th>Oppervlakte</th>
      <th>Inwoners</th>
    </tr>
  </table>
</div>