0

Estuve buscando en diferentes foros y preguntandole a colegas, pero no recibo una respuesta adecuada.

Invoco a la API OpenWeather para mostrar el clima de hoy. En navegadores como por ejemplo Chrome, Firefox funciona correctamente pero en Safari estoy teniendo problemas y no invoca los datos extraídos obtenidos con la API (lo cual provoca que esos campos queden vacios como se ve en la imagen).

Quiero saber si alguien me puede dar una mano o tirarme una idea por dónde buscar o cuál es el motivo por el que no obtiene los datos en navegadores Safari. Dejo el codigo .

window.addEventListener('load', () => {
    let long;
    let lat;
    let key;

    let fecha = document.getElementById('fecha');
    let ciudad = document.getElementById('ciudad');
    let estadoIcono = document.getElementById('iconoEstado');
    let tempValor = document.getElementById('tempValor');
    let descripcionClima = document.getElementById('descripcionClima');
    let viento = document.getElementById('viento')
    let presion = document.getElementById('presion')
    let humedad = document.getElementById('humedad')
    let nubes = document.getElementById('nubes')

    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(posicion => {
            // console.log(posicion.coords.latitude)
            long = '-57.91927449999901'
            lat = '-34.84115854558444'
            key = '11111111111111111111111111'

            // ubicacion actual
            const url = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${long}&units=metric&lang=es&appid=${key}`

            // console.log(url)

            fetch(url)
                .then(Response => { return Response.json() })
                .then(data => {
                    let hoy = new Date();
                    let dia = hoy.getDate();
                    let mesShort = hoy.toLocaleString("es", { month: "short" });
                    let mes = mesShort.toUpperCase();
                    let year = hoy.getFullYear();
                    fecha.textContent = `${mes} ${dia}, ${year}`
                    let pais = data.sys.country
                    ciudad.textContent = `Ensenada, ${pais}`

                    let temp = Math.round(data.main.temp);
                    tempValor.textContent = `${temp}°C`;

                    let descripcion = data.weather[0].description;
                    descripcionClima.textContent = descripcion.toUpperCase();

                    let vientoDesc = data.wind.speed;
                    viento.textContent = `VIENTO: ${vientoDesc} KM/H`
                    let presionDesc = data.main.pressure;
                    presion.textContent = `PRESIÓN: ${presionDesc} MMHG`
                    let humedadDesc = data.main.humidity;
                    humedad.textContent = `HUMEDAD: ${humedadDesc} %`
                    let nubesDesc = data.clouds.all;
                    nubes.textContent = `NUBES: ${nubesDesc} %`
                    // ICONOS ANIMADOS 
                    switch (data.weather[0].main) {
                        case 'Thunderstorm':
                            estadoIcono.src = 'public/icons/animated/thunder.svg'
                            // console.log('TORMENTA');
                            break;
                        case 'Drizzle':
                            estadoIcono.src = 'public/icons/animated/rainy-2.svg'
                            // console.log('LLOVIZNA');
                            break;
                        case 'Rain':
                            estadoIcono.src = 'public/icons/animated/rainy-7.svg'
                            // console.log('LLUVIA');
                            break;
                        case 'Snow':
                            estadoIcono.src = 'public/icons/animated/snowy-6.svg'
                            // console.log('NIEVE');
                            break;
                        case 'Clear':
                            estadoIcono.src = 'public/icons/animated/day.svg'
                            // console.log('LIMPIO');
                            break;
                        case 'Atmosphere':
                            estadoIcono.src = 'public/icons/animated/weather.svg'
                            // console.log('ATMOSFERA');
                            break;
                        case 'Clouds':
                            estadoIcono.src = 'public/icons/animated/cloudy.svg'
                            // console.log('NUBES');
                            break;
                        default:
                            estadoIcono.src = 'public/icons/animated/cloudy-day-1.svg'
                        // console.log('por defecto');
                    }
                })
                .catch(error => {
                    console.log(error)
                })
        })
    }
})

Adjunto tambien la captura de pantalla, se puede ver que los ratos recibidos no se muestran.

Imagen del propblema en Safari

3
  • Sabes si al menos los datos llegan correctamente? Es decir, recibes respuesta de la solicitud? el 9 nov. 2022 a las 14:57
  • Es posible que el navigation.geolocation esté devolviendo un falsy? O que necesites algún permiso para obtener la ubicación y sin él no te la da? Y por otro lado... por favor, dime que eso que has puesto en key no es tu key real! Los datos privados nunca se comparten
    – Benito-B
    el 9 nov. 2022 a las 14:59
  • @benito-B ya edité , no me había dado cuenta y deje la key. no entendí lo que me dijiste de navigation.geolocation .
    – Dani Luna
    el 9 nov. 2022 a las 15:18

0

Tu Respuesta

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

Examina otras preguntas con la etiqueta o formula tu propia pregunta.