openweathermap api invalid api key error [error401]

I am facing a problem dealing with openweathermap api, the api call is working perfectly in the browser but when use it in the project I get error401 which is referred here like this:
enter image description here

I have none of the problems listed in it

also here’s the link:http://api.openweathermap.org/data/2.5/weather?zip=10001,us&appid=####

works perfectly in the browser

enter image description here

and here’s my app.js:

/* Global Variables */
let baseURL = 'http://api.openweathermap.org/data/2.5/weather?zip=';
let apiKey = ',us&appid=####';



// Create a new date instance dynamically with JS
let d = new Date();
let newDate = d.getMonth()+'.'+ d.getDate()+'.'+ d.getFullYear();

document.getElementById('generate').addEventListener('click', performAction);

function performAction(e){
  const temperature =  document.getElementById('zip').value;
  const userResponse = document.getElementById('feelings').value;
  console.log(baseURL+temperature+apiKey)
  const getTemp = async (baseURL,temperature,apiKey)=>{
      
      const res = await fetch(baseURL+temperature+apiKey)
    try {

    const data=await res.json();
    return data;
    
    }  catch(error) {
    console.log("error", error);
    // appropriately handle the error
     }
  }
   getTemp(baseURL+temperature+apiKey).then( res =>{ console.log(res);
   
    postData('/add', {temperature: temperature, date: newDate, userResponse: userResponse});
    updateUI('/all');})

when I console.log() the url it works perfectly, yet the error appears in the get request:
enter image description here

7 thoughts on “openweathermap api invalid api key error [error401]”

  1. getTemp is the problem

    the first argument given to getTemp is the full url (yet the function combines 3 arguments for the fetch url)

    2 of these values therefore will be undefined and the fetch would end up as (baseURL+temperature+apiKey)+undefined+undefined instead of baseURL+temperature+apiKey

    The solution is for when calling getTemp, use commas so that they fill their appropriate argument places in the function

    /* Global Variables */
    let baseURL = 'http://api.openweathermap.org/data/2.5/weather?zip=';
    let apiKey = ',us&appid=####';
    
    
    
    // Create a new date instance dynamically with JS
    let d = new Date();
    let newDate = d.getMonth()+'.'+ d.getDate()+'.'+ d.getFullYear();
    
    document.getElementById('generate').addEventListener('click', performAction);
    
    function performAction(e){
      const temperature =  document.getElementById('zip').value;
      const userResponse = document.getElementById('feelings').value;
      console.log(baseURL+temperature+apiKey)
      const getTemp = async (baseURL,temperature,apiKey)=>{
          
          const res = await fetch(baseURL+temperature+apiKey)
        try {
    
        const data=await res.json();
        return data;
        
        }  catch(error) {
        console.log("error", error);
        // appropriately handle the error
         }
      }
       getTemp(baseURL,temperature,apiKey).then( res =>{ console.log(res);
       
        postData('/add', {temperature: temperature, date: newDate, userResponse: userResponse});
        updateUI('/all');})
    
    Reply

Leave a Comment