ReferenceError: API is not defined (Javascript)

Question

I'm trying to make an App for meteo, but my api doesn't load. When i call API in fetch it output: ReferenceError: API is not defined It is my first app (also my first question on StackOverflow), this is the snippet:

window.addEventListener('load', () =>{
  let long;
  let lang;
  let temperatureDescription = document.querySelector('.temperature-description');
  let temperatureDegree = document.querySelector('.temperature-degree');
  let locationTimezone = document.querySelector('.location-timezone');
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(position=>{
      long = position.coords.longitude;
      lat = position.coords.latitude;
      const proxy = 'https://cors-anyware.herouapp.com/';
      const API = '${proxy}https://api.openweathermap.org/data/2.5/forecast?id=524901&APPID=cc6a4a00070dfbee1327390b072f88d6/${lat},${long}';
    });
    fetch(API).then(response=>{
      return response.json();
    }).then(data=>{
      console.log(data);
      const {
        temperature,
        summary
      }
      = data.currently;
      //set DOM elements from the API
      temperatureDegree.textContent = temperature;
    });
  };
}
);

Can anyone help me? Thanks :)

You declare `API` variable in the `navigator.geolocation.getCurrentPosition` method scope. Declare it outside and your `fetch` call should be able to access it. — nbokmans, May 06 '20 at 10:09

score 0 · Answer 1 · answered May 06 '20 at 10:11

Your API constant variable is block scoped, it means that it is accessible only inside of callback of getCurrentPosition function.

And also,navigator.geolocation.getCurrentPosition is asynchronous, you should call fetch inside the callback. otherwise fetch will execute before location lat lon is detected by browser.

window.addEventListener('load', () =>{
  let long;
  let lang;
  let temperatureDescription = document.querySelector('.temperature-description');
  let temperatureDegree = document.querySelector('.temperature-degree');
  let locationTimezone = document.querySelector('.location-timezone');
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(position=>{
      long = position.coords.longitude;
      lat = position.coords.latitude;
      const proxy = 'https://cors-anyware.herouapp.com/';
      const API = '${proxy}https://api.openweathermap.org/data/2.5/forecast?id=524901&APPID=cc6a4a00070dfbee1327390b072f88d6/${lat},${long}';

      fetch(API).then(response=>{
          return response.json();
      }).then(data=>{
          console.log(data);
          const {
            temperature,
            summary
          }
         = data.currently;
        //set DOM elements from the API
        temperatureDegree.textContent = temperature;
      });
    });

  };
}
);

I've tried this, but in load give an error: SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data — Lukex13, May 06 '20 at 10:43
that's JSON parsing error, check the api response. if it's not in valid JSON format. your `response.json()` will fail in the first `then` block of `fetch` call. add a console statement before `response.json()` and check what's being consoled. — Gulam Hussain, May 06 '20 at 10:47
is it possible that they did not activate my API? Response is: Response { type: "basic", url: "http://127.0.0.1:5500/firstApp/$%7Bproxy%7Dhttps://api.openweathermap.org/data/2.5/forecast?id=524901&APPID=cc6a4a00070dfbee1327390b072f88d6/${lat},${long}", redirected: false, status: 404, ok: false, statusText: "Not Found", headers: Headers, body: ReadableStream, bodyUsed: false } — Lukex13, May 06 '20 at 10:58
I think somethig is wrong with the endpoint, check that first. — Gulam Hussain, May 06 '20 at 11:16

ReferenceError: API is not defined (Javascript)

1 Answers1