title: Uncaught TypeError with JSON Get Request
body: <p><code>main</code> is the JSON object's property that I want to get from the weather API, but I'm getting the following error:</p>
  
  <blockquote>
    <p>Uncaught TypeError: Cannot read property 'main' of undefined</p>
  </blockquote>
  
  <p>What's wrong?</p>
  
  <p>HTML code:</p>
  
  <pre><code>&lt;!-- display current temperature in Fahrenheight (default) --&gt;
  &lt;div id="temp"&gt;&lt;/div&gt;
  &lt;!-- display user's curent location --&gt;
  &lt;div id="pos"&gt;&lt;/div&gt;
  &lt;button id="loc"&gt;Show my location&lt;/button&gt;
  &lt;button id="switch"&gt;Switch Metric Unit&lt;/button&gt;
  
  // return temperature and weather conditions for user's current location
  var temp = document.getElementById('temp');
  temp.innerHTML = "";
  var tempStr = document.getElementById('temp').innerHTML;
  var latitude;
  var longitude;
  </code></pre>
  
  <p>JS code:</p>
  
  <pre><code>if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      latitude = position.coords.latitude;
      longitude = position.coords.longitude;
      // pos = position.coords.latitude + ", " + position.coords.longitude;
    })};
  
    $.getJSON("https://fcc-weather-api.glitch.me/api/current?lat=" + latitude + "&amp;lon=" + longitude, 
      setTimeout(function(data) {
        $('#temp').html(celsiusToFahrenheit(data.main.temp) + "&amp;deg;F");
      }), 1000)
  </code></pre>