1

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)

1 respuesta 1

0

Estas realizando dos peticiones en las cuales esperas obtener diferente información, eso lo puedes realizar sin problema. Revisando las urls para consultar la API.

Petición 1 (funciona).

  let url = `https://api.openweathermap.org/data/2.5/weather?q=${cityValue}&appid=${API_KEY}`;

Petición 2 (No funciona).

  let url2 = `api.openweathermap.org/data/2.5/forecast?q=${cityValue}&appid=${API_KEY}`

El problema principal es que no estás usando el protocolo https:// para la url de la segunda petición, en estos casos es importante revisar que error se obtiene, eso puede darte idea de que este es el problema de una forma más rápida.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.