Seeking to showcase weather API data from: ()
import Image from "next/image"
interface Hour {
time_epoch: number
time: string
temp_c: number
temp_f: number
is_day: number
wind_mph: number
wind_kph: number
wind_degree: number
wind_dir: string
pressure_mb: number
pressure_in: number
precip_mm: number
precip_in: number
humidity: number
cloud: number
feelslike_c: number
feelslike_f: number
windchill_c: number
windchill_f: number
heatindex_c: number
heatindex_f: number
dewpoint_c: number
dewpoint_f: number
will_it_rain: number
chance_of_rain: number
will_it_snow: number
chance_of_snow: number
vis_km: number
vis_miles: number
gust_mph: number
gust_kph: number
}
async function getHourlyForecast() {
const location = 'Pemberton'
const apiKey = '84703323c7f94238a98203306233010'
const response = await fetch(`http://api.weatherapi.com/v1/forecast.json?key=${apiKey}&q=${location}&days=1&aqi=no&alerts=no` , {
cache: 'no-cache',})
const data = await response.json()
return data
}
export default async function Forecast() {
const forecast = await getHourlyForecast()
console.log(forecast);
return (
<div>
<h2 className="text-center">Hourly Weather Forecast</h2>
<div className="grid grid-cols-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-7 gap-6">
{forecast.forecastday.map((hour, index) =>
(
<div key={index} className="text-center rounded-lg flex flex-col items-center bg-green-950/25 p-10">
<p>{new Date(hour.date).toLocaleString("en-US", { weekday: "short"})}</p>
<img className="w-50 h-50"
src={hour.hour.condition.icon}
alt={hour.hour.condition.text}
aria-label={hour.hour.condition.text}/>
<div>
<p className="bg-black/25 px-2 italic rounded-xl text-white mb-2">
High:{" "}
<span aria-label={`Maximum temperature: ${hour.hour.temp_c.toFixed()} degrees Celcius`}>
{hour.hour.maxtemp_c.toFixed()}°
</span>
</p>
<p className="bg-black/25 px-2 italic rounded-xl text-white">
Low:{" "}
<span aria-label={`Minimum temperature: ${hour.hour.temp_c.toFixed()} degrees Celcius`}>
{hour.hour.temp_c.toFixed()}°
</span>
</p>
</div>
</div>
))}
</div>
</div>
);
}
Successfully mapping data from Forecast.Current, yet encountering issues with mapping information from Forecast.Forecastday.Day object as it returns undefined. Would appreciate any assistance.
Tried: {forecast.forecastday.map((hour, index) => but received undefined.