Estoy aprendiendo a realizar peticiones a APIS utilizando fetch. Me propuse a realizar un proyecto de una pagina web que obtiene datos sobre el clima. Pude hacerlo bien, pero estaría necesitando hacer mas de una petición para obtener mas datos para otra sección de la pagina. Comparto el código de lo que se me ocurrió hacer y la parte del código que creo que esta mal.
Esta seria la primera parte del codigo, la que esta funcionando.
let search = document.getElementById("searchBtn")
let cityRef = document.getElementById("city")
let tableHourly = document.getElementById("hourly")
const getWeather = () => {
let cityValue = cityRef.value;
if (cityValue.length == 0) {
result.innerHTML = `
<h3 style= "color: black;">Please enter a city name</h3>
<img src= "img/lupa.png" width= "75px" style= "margin-top: 10px;">
`
}else {
let API_KEY = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";
let url = `https://api.openweathermap.org/data/2.5/weather?q=${cityValue}&appid=${API_KEY}`;
cityRef.value = "";
fetch(url)
.then((response) => {
return response.json()
})
.then((data) => {
let dataName = data.name,
dataIcon = data.weather[0].icon,
dataDescription = data.weather[0].description,
dataMain = data.weather[0].main,
dataTemp = data.main.temp,
dataTempMAX = data.main.temp_max,
dataTempMIN = data.main.temp_min,
dataPressure = data.main.pressure,
dataHumidity = data.main.humidity,
dataCountry = data.sys.country;
console.log(data);
console.log(dataIcon)
console.log(data.weather[0].description)
console.log(data.weather[0].main)
console.log(data.name)
console.log(data.main.temp)
console.log(data.main.temp_max)
console.log(data.main.temp_min)
console.log(data.main.pressure)
console.log(dataCountry)
result.innerHTML = `
<h1 class= "dataName">${dataName}</h1>
<h4>Country: ${dataCountry}</h4>
<hr>
<div class= "dataMainContent">
<h1 class="main">${dataMain}</h1>
<h4 class="description">${dataDescription}</h4>
</div>
<hr>
<div class= "iconContent">
<h1>${Math.round(dataTemp - 273) + "°"}</h1>
<img src="https://openweathermap.org/img/w/${dataIcon}.png">
</div>
<div class="temp-container">
<div>
<h4 class="title">min</h4>
<h4 class="temp">${Math.round(dataTempMIN - 273) + "°"}</h4>
</div>
<div>
<h4 class="title">max</h4>
<h4 class="temp">${Math.round(dataTempMAX - 273) + "°"}</h4>
</div>
</div>
<hr>
<h2 style="margin-top: 5px;"> Pressure</h2>
<h4>${dataPressure} hPa</h4>
<hr>
<h2 style="margin-top: 5px;"> Humidity</h2>
<h4>${dataHumidity} %</h4>
`
})
.catch( () => {
result.innerHTML = `
<h2> Oops! We couldn't find information about the city: "${cityValue}"</h2>
<img src= "https://cdn-icons-png.flaticon.com/512/3262/3262387.png" width= "75px">
`
})
}
}
searchBtn.addEventListener("click", getWeather);
window.addEventListener("load", getWeather);
Y esta es la otra parte, la que no funciona, ya que no logro visualizar los datos que traigo de la API en la consola (trate de hacer el mismo procedimiento que en la anterior solicitud)
const getWeatherHourly = () => {
let cityValue = cityRef.value;
if (cityValue.length == 0) {
tableHourly.innerHTML = `
<div class= "contentHourly">
<h3 style= "color: black;">Please enter a city name</h3>
<img src= "img/lupa.png" width= "75px" style= "margin-top: 10px;">
</div>
`
}else {
let API_KEY = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
let url2 = `api.openweathermap.org/data/2.5/forecast?q=${cityValue}&appid=${API_KEY}`
cityRef.value = "";
fetch(url2)
.then((response) => {
return response.json()
})
.then((data) => {
console.log(data)
})
}
}
searchBtn.addEventListener("click", getWeatherHourly);
window.addEventListener("load", getWeatherHourly)