So I have a project that takes user input zip code and country, takes country code based on the country input from restcountries API and then takes weather based on zip and country code from openweather API. Now openweather has some bug so not all countries work. I want to give a message to the user when users inputed country doesn't work. Just simple some text that "something went wrong, try another country". I'm also using netlify functions for the call. I am fairly new to coding and I have tried a few things, but I can't bite it through. How can i make this error message for the user?
Here's my event for api calls and posting data:
async function performAction(e) {
const restCountriesUrl = `https://restcountries.com/v3.1/name/${country}`;
getCountryCode(restCountriesUrl).then(async (countrydata) => {
const countryCode = countrydata[0].cca2;
const weatherResponse = await fetch(`/.netlify/functions/fetch-weather?zip=${zip}&countryCode=${countryCode}`)
.then((res) => res.json());
const weatherResponseText = JSON.stringify(weatherResponse);
console.log(weatherResponseText);
city.innerHTML = weatherResponse.city;
date.innerHTML = `Date: ${newDate}`;
temp.innerHTML = `Temperature: ${weatherResponse.temp}°C`;
content.innerHTML = `Feeling: ${feelings}`;
});
}
And here's my netlify function:
const handler = async (event) => {
const { zip, countryCode } = event.queryStringParameters;
const openWeatherMapUrl = `https://api.openweathermap.org/data/2.5/weather?zip=${zip},${countryCode}&units=metric&appid=${process.env.API_KEY_OPENWEATHERMAP}`;
try {
const { data } = await axios.get(openWeatherMapUrl);
return {
statusCode: 200,
body: JSON.stringify({
temp: data.main.temp,
city: data.name,
}),
};
} catch (error) {
return { statusCode: 500, body: error.toString() };
}
};