Problem getting API data to display for Local Weather App

JavaScript
1

I’m working on the Local Weather App. I can’t seem to get the JSON data to display on my page. I’m not sure whether it’s because it’s simply not connecting to the API, or whether it’s a problem with my code (more likely the second). Here is a link to my project on CodePen: https://codepen.io/sanskrtapanditah/pen/qozxOG

And here is my HTML code:

<div class="container-fluid">
    <div class="row text-center">
      <header>
          <h1>L<i class="wi-day-sunny"></i>cal Weather</h1>
        </header>
    </div>
    <div class="row text-center">
      <span class="city">city</span>
      <span class="country">country</span>
    </div>
    <div class="row text-center">
      <span class="temperature">C/F</span>
    </div>
    <div class="row text-center">
      <span class="weather">weather type</span>
    </div>
    <div id="data"></div>
</div>

Here is my Javascript code:

const ROOT_URI = "https://fcc-weather-api.glitch.me/api/current?";


$(document).ready(function(){
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(fetchWeather);
    // temp toggle here! 
  } else {
    $("#data").html("Sorry! Your browser does not support geolocation");
    console.log("Sorry! Your browser does not support geolocation.");
  }
});

function fetchWeather(lat, lon) {
  const lat = "lat=" + position.coords.latitude;
  const lon = "lon=" + position.coords.longitude;
  const uri = `${ROOT_URI}${lat}&${lon}`;
  $.getJSON(uri, function(json){
    $(".city").html(json.name + ", ");
    $(".country").html(json.sys.country);
    currentTempInCelsius = Math.round(result.main.temp * 10) / 10;
    $(".temperature").html(currentTempInCelsius + " " + String.fromCharCode(176));
    $("#tempunit").html(tempUnit);
    $(".weather").html(json.weather[0].main);
  });
}

Thank you in advance for any suggestions on how to fix this.

3

Thank you so much. I didn’t realize that const could not be used if it had already been declared in a parameter. After those changes, the API is working.

4

You also need to define tempUnit before using it in $("#tempunit").html(tempUnit);