I’ve been getting a 401 back from the GET request to OpenWeather (in getForecast()) with the below response.
{“cod”:401, “message”: “Invalid API key. Please see http://openweathermap.org/faq#error401 for more info.”}
My call url ended up as such, appended with the key, which i checked multiple times to be correct.
https://api.openweathermap.org/data/2.5/weather&q=Sydney&APPID=
The OpenWeather FAQ on 401s says to check if it’s correct (it is), and that it may take a few hours to active (i set up my accounts more than a day ago)… and that it may be denying access to a free account attempting to use a payed service.
All seems correct with the code, no errors internally and combed through looks pretty identical to the hints.
Has OpenWeather introduced a paywall to this endpoint or is there another possible error?
// Foursquare API Info
const clientId = 'xxx';
const clientSecret = 'xxx';
const url = 'https://api.foursquare.com/v2/venues/explore?near=';
// OpenWeather Info
const openWeatherKey = 'xxx';
const weatherUrl = 'https://api.openweathermap.org/data/2.5/weather';
// Page Elements
const $input = $('#city');
const $submit = $('#button');
const $destination = $('#destination');
const $container = $('.container');
const $venueDivs = [$("#venue1"), $("#venue2"), $("#venue3"), $("#venue4")];
const $weatherDiv = $("#weather1");
const weekDays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
// Add AJAX functions here:
const getVenues = async () => {
const city = $input.val();
const urlToFetch = `${url}${city}&limit=10&client_id=${clientId}&client_secret=${clientSecret}&v=20210226`;
try {
const response = await fetch(urlToFetch);
if (response.ok) {
const jsonResponse = await response.json();
const venues = jsonResponse.response.groups[0].items.map(item => item.venue);
//console.log(venues);
return venues;
}
}
catch (error){
console.log(error);
}
};
const getForecast = async () => {
try {
const city = $input.val();
const urlToFetch = `${weatherUrl}&q=${city}&APPID=${openWeatherKey}`;
const response = await fetch(urlToFetch);
if (response.ok) {
const jsonResponse = await response.json();
console.log(jsonResponse);
}
}
catch (error) {
console.log(error);
}
};
// Render functions
const renderVenues = (venues) => {
$venueDivs.forEach(($venue, index) => {
// Add your code here:
let venueContent = '';
$venue.append(venueContent);
});
$destination.append(`<h2>${venues[0].location.city}</h2>`);
}
const renderForecast = (day) => {
// Add your code here:
let weatherContent = '';
$weatherDiv.append(weatherContent);
}
const executeSearch = () => {
$venueDivs.forEach(venue => venue.empty());
$weatherDiv.empty();
$destination.empty();
$container.css("visibility", "visible");
getVenues()
getForecast()
return false;
}
$submit.click(executeSearch)
