es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Cómo acceder a los datos de OpenWeatherMap de 7 días y por hora?

12 Jul, 2023 Programación

Estoy creando una aplicación del clima utilizando la API de openweathermap.

Si el usuario ingresa al sitio, mostrar los datos del clima de los 7 días en forma de tarjetas.

Pero si el usuario hace clic en una tarjeta de clima, mostrar los datos del día particular por hora.

Para obtener los datos de los 7 días, estoy utilizando este código:

axios
    .get(
        "https://api.openweathermap.org/data/2.5/forecast?q={NOMBRE_CIUDAD},{CODIGO_PAIS}&appid={CLAVE_API}&cnt=7"
    )
    .then((datos) => {
        console.log(datos.data);
    });

Con esto, obtengo los datos de los 7 días. ¿Pero cómo puedo obtener los datos por día/hora utilizando esta API?

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para obtener los datos de un día en particular por hora, puedes utilizar el siguiente punto de conexión de la API:

    axios
    .get(
        "https://api.openweathermap.org/data/2.5/forecast?q={NOMBRE_CIUDAD},{CÓDIGO_PAÍS}&appid={CLAVE_API}&cnt=8"
    )
    .then((data) => {
        const hourlyData = data.data.list.filter(weather => {
            const date = new Date(weather.dt_txt);
            return date.getDate() === DÍA_SELECCIONADO; // Reemplaza DÍA_SELECCIONADO con el día seleccionado por el usuario
        });
        console.log(hourlyData);
    });

    Explicación:

    • Estamos utilizando el mismo punto de conexión de la API que antes, pero ahora estamos solicitando 8 días de datos en lugar de 7. Esto se debe a que la API devuelve datos en intervalos de 3 horas, y necesitamos tener al menos 8 días de datos para asegurarnos de cubrir las 24 horas de un día en particular.
    • Luego filtramos el array list para incluir solo los datos del día seleccionado por el usuario. Para hacer esto, analizamos la propiedad dt_txt de cada elemento del array para obtener la fecha y luego la comparamos con la variable DÍA_SELECCIONADO. Esta variable debe establecerse en el día seleccionado por el usuario, en formato de un número entre 1 y 31.
    • La variable hourlyData contendrá un array de objetos, cada uno representando un intervalo de 3 horas de datos meteorológicos para el día seleccionado.

    Luego puedes utilizar esta variable hourlyData para mostrar los datos meteorológicos en forma de tarjetas u otros elementos de interfaz de usuario que se ajusten a tu aplicación.

Comments are closed.