title: Weather widget not fetching JSON data from API
body: <p>I am attempting to build a weather widget based on geolocation. I came across a code snippet that I would like to re-use, however, it is jQuery and I haven't been able to fully translate it to JavaScript.</p>
  <p>The issue begins at the beginning of the function <strong>weatherWidget()</strong> already, where I am fetching a JSON API (which is working so far), but I cannot seem to access the individual values. The console starts off by saying that &quot;<strong>ipAPI</strong> is not defined&quot;.</p>
  <p>I don't fully understand the code, which is probably why I am having such a hard translating it to JavaScript, and even though I've done a lot of research on this I can't seem to get to the bottom of the issue. Any leads are greatly appreciated!</p>
  <pre><code>&lt;section id=&quot;weather&quot;&gt;
  
          &lt;h1&gt;Your Weather&lt;/h1&gt;
          &lt;div class=&quot;visual-only&quot; aria-hidden=&quot;true&quot;&gt;
              &lt;div id=&quot;quick-view&quot;&gt;
                  &lt;div id=&quot;weather-icons&quot;&gt;
                  &lt;i class=&quot;wi&quot;&gt;&lt;/i&gt;
                  &lt;i class=&quot;wi&quot;&gt;&lt;/i&gt;
              &lt;/div&gt;
              &lt;div id=&quot;loading&quot;&gt;
                  Loading&lt;span&gt;.&lt;/span&gt;&lt;span&gt;.&lt;/span&gt;&lt;span&gt;.&lt;/span&gt;
              &lt;/div&gt;
              &lt;span id=&quot;tempF&quot; class=&quot;show&quot;&gt;
                  &lt;span&gt;&lt;/span&gt;
                  &lt;i class='wi wi-fahrenheit'&gt;&lt;/i&gt;
              &lt;/span&gt;
              &lt;span id=&quot;tempC&quot; class=&quot;hide&quot;&gt;
                  &lt;span&gt;&lt;/span&gt;
                  &lt;i class='wi wi-celsius'&gt;&lt;/i&gt;
              &lt;/span&gt;
              &lt;/div&gt;
                  &lt;div id=&quot;grid&quot;&gt;
                  &lt;div id=&quot;location&quot;&gt;…&lt;/div&gt;
                  &lt;div id=&quot;status&quot;&gt;…&lt;/div&gt;
                  &lt;div id=&quot;wind&quot;&gt;
                  &lt;span class=&quot;compass&quot;&gt;
                      &lt;i class=&quot;wi&quot;&gt;…&lt;/i&gt;
                  &lt;/span&gt;
                  &lt;span id=&quot;miles&quot; class=&quot;show&quot;&gt;
                  &lt;/span&gt;
                  &lt;span id=&quot;meters&quot; class=&quot;hide&quot;&gt;
                  &lt;/span&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;button class=&quot;weatherBtn&quot;&gt;F / C&lt;/button&gt;
      &lt;/div&gt;
          &lt;p class=&quot;visually-hidden&quot;&gt;
              Weather data currently unavailable.
          &lt;/p&gt;
  
      &lt;/section&gt;
  </code></pre>
  <pre><code>function weatherWidget() {
  
  // Grab the latitude &amp; longitude
  fetch('https://ipapi.co/json/')
      .then(res =&gt; res.json())
      .then(getJSON1(ipAPI));
  
  function getJSON1(ipAPI) {
    let latitude = ipAPI.latitude;
    let longitude = ipAPI.longitude;
    let city = ipAPI.city.replace(/(\s)/gi, &quot;+&quot;); // Replace spaces
    let region = ipAPI.region_code;
    
    // Grab a local map as background based on user's IP
    let imageURL =
      &quot;https://maps.googleapis.com/maps/api/staticmap?center=&quot; + city + &quot;&amp;zoom=10&amp;size=640x640&amp;scale=2&amp;format=jpeg&amp;key=&quot; + gmapsKey;
  
    // Feed the latitude and longitude to the OpenWeatherMap API
    fetch('https://cors-everywhere.herokuapp.com/http://api.openweathermap.org/data/2.5/weather?lat=' + latitude + &quot;&amp;lon=&quot; + longitude + &quot;&amp;APPID=&quot; + owKey)
      .then(res =&gt; res.json())
      .then(getJSON2());
  
    function getJSON2(ow) {
      let location = city + &quot;, &quot; + region,
          status = ow.weather[0].main,
          windMeters = ow.wind.speed,
          windMiles = ow.wind.speed * Math.round(2.23694),
          tempF = Math.round(
            ((ow.main.temp - 273.15) * 1.8 + 32) * 10 / 10
          ).toFixed(0),
          tempC = Math.round(ow.main.temp - 273.15),
          iconSource = ow.weather[0].icon,
          icons = {
            // ow.weather[0].icon to wi
            // Daytime conditions
            &quot;01d&quot;: &quot;wi-day-sunny&quot;,
            &quot;02d&quot;: &quot;wi-day-sunny-overcast&quot;,
            &quot;03d&quot;: &quot;wi-day-cloudy&quot;,
            &quot;04d&quot;: &quot;wi-cloudy&quot;,
            &quot;09d&quot;: &quot;wi-day-sprinkle&quot;,
            &quot;10d&quot;: &quot;wi-day-rain&quot;,
            &quot;11d&quot;: &quot;wi-day-thunderstorm&quot;,
            &quot;13d&quot;: &quot;wi-day-snow&quot;,
            &quot;50d&quot;: &quot;wi-day-fog&quot;,
  
            // Nightime conditions
            &quot;01n&quot;: &quot;wi-stars&quot;,
            &quot;02n&quot;: &quot;wi-night-partly-cloudy&quot;,
            &quot;03n&quot;: &quot;wi-night-cloudy&quot;,
            &quot;04n&quot;: &quot;wi-cloudy&quot;,
            &quot;09n&quot;: &quot;wi-night-sprinkle&quot;,
            &quot;10n&quot;: &quot;wi-night-rain&quot;,
            &quot;11n&quot;: &quot;wi-night-thunderstorm&quot;,
            &quot;13n&quot;: &quot;wi-night-snow&quot;,
            &quot;50n&quot;: &quot;wi-night-fog&quot;
          },
          iconName = iconSource.split(&quot; &quot;).map(function(code) {
            var results = [];
            results.push(icons[code]);
            return results.join(&quot;&quot;);
          }),
          icon = iconName[0],
          extremeSource = ow.weather[0].id.toString(),
          extremes = {
            // ow.weather[0].id to wi
            // Extreme weather conditions
            &quot;900&quot;: &quot;wi-tornado&quot;,
            &quot;901&quot;: &quot;wi-hurricane&quot;,
            &quot;902&quot;: &quot;wi-hurricane&quot;,
            &quot;903&quot;: &quot;wi-snowflake-cold&quot;,
            &quot;904&quot;: &quot;wi-hot&quot;,
            &quot;905&quot;: &quot;wi-windy&quot;,
            &quot;906&quot;: &quot;wi-hail&quot;,
  
            // Beaufort wind scale
            &quot;951&quot;: &quot;wi-beafort-1&quot;,
            &quot;952&quot;: &quot;wi-beafort-2&quot;,
            &quot;953&quot;: &quot;wi-beafort-3&quot;,
            &quot;954&quot;: &quot;wi-beafort-4&quot;,
            &quot;955&quot;: &quot;wi-beafort-5&quot;,
            &quot;956&quot;: &quot;wi-beafort-6&quot;,
            &quot;957&quot;: &quot;wi-beafort-7&quot;,
            &quot;958&quot;: &quot;wi-beafort-8&quot;,
            &quot;959&quot;: &quot;wi-beafort-9&quot;,
            &quot;960&quot;: &quot;wi-beafort-10&quot;,
            &quot;961&quot;: &quot;wi-beafort-11&quot;,
            &quot;962&quot;: &quot;wi-beafort-12&quot;
          },
          extremeName = extremeSource.split(&quot; &quot;).map(function(code) {
            var results = [];
            results.push(extremes[code]);
            return results.join(&quot;&quot;);
          }),
          extreme = extremeName[0];
  
        let windIcon = &quot;wi-wind towards-&quot; + ow.wind.deg + &quot;-deg&quot;;
  
      document.querySelector('.sr-only').empty().append(&quot;Current conditions in &quot; + city + &quot;: &quot; + status + &quot;, wind at &quot; + windMiles + &quot; MPH (&quot; + windMeters + &quot; m/s)&quot;);
        // quick-view
        document.querySelector(&quot;#loading&quot;).hide();
        document.querySelector(&quot;#tempF &gt; span&quot;)
          .empty()
          .append(tempF);
        document.querySelector(&quot;#tempC &gt; span&quot;)
          .empty()
          .append(tempC);
        document.querySelector(&quot;#weather-icons &gt; i:first-child&quot;).classList.add(icon);
        document.querySelector(&quot;#weather-icons &gt; i:last-child&quot;).classList.add(extreme);
  
        // grid
        document.querySelector(&quot;#location&quot;)
          .empty()
          .append(location);
        document.querySelector(&quot;#status&quot;)
          .empty()
          .append(status);
        // wind
        document.querySelector(&quot;.compass &gt; i&quot;)
          .empty()
          .classList.add(windIcon);
        document.querySelector(&quot;#miles&quot;)
          .empty()
          .append(windMiles + &quot; MPH&quot;);
        document.querySelector(&quot;#meters&quot;)
          .empty()
          .append(windMeters + &quot; m/s&quot;);
      }
  
    function error() {
      document.querySelector(&quot;#main&quot;).textContent = &quot;Unable to retrieve your location&quot;;
    }  
  };
  
  document.querySelector(&quot;.weatherBtn&quot;).click(function() {
      document.querySelector(&quot;#tempF&quot;).toggle.classList.add(&quot;show1 hide1&quot;);
      document.querySelector(&quot;#tempC&quot;).toggle.classList.add(&quot;show1 hide1&quot;);
      document.querySelector(&quot;#miles&quot;).toggle.classList.add(&quot;show1 hide1&quot;);
      document.querySelector(&quot;#meters&quot;).toggle.classList.add(&quot;show1 hide1&quot;);
  });
  }
  </code></pre>