0

Estoy haciendo un proyecto para un curso que estoy haciendo, en el que tengo que usar la API de openweather.

Necesito comprobar si se logró traer la información solicitada mediante getJSON utilizando una bandera (booleana), pero la ejecución no sigue el orden esperado y luego de ejecutarse el get, la ejecución pasa al método "comprobar". También intenté capturar el error 404, que se produce cuando se introduce una ciudad no valida en la variable "city", pero no logré hacerlo

let enviar =document.querySelector("button");
let city = document.querySelector("#city")
let flag = false;
let a;
clima.on;
enviar.addEventListener("click",function(){    
   clima()
   comprobar() 
});

function clima(){
    $.getJSON("https://api.openweathermap.org/data/2.5/weather?q=" + city.value + "&appid=95176c8edea30e33338e0eaddd53a916&units=metric",function(data){
        document.querySelector(".container").style.visibility = "visible";    
        flag = true;
        
        let vars = data.main;
        let vars2 = data.sys;
        let vars3; 
        vars3 = (data.weather);
        document.querySelector("#ciudad").textContent = data.name;
        document.querySelector("#pais").textContent = vars2.country;
        document.querySelector("#temperatura").textContent = vars.temp;
        document.querySelector("#grados").innerHTML = "<sup>°C</sup>";
        document.querySelector("#wicon").setAttribute("src","http://openweathermap.org/img/wn/"+vars3[0].icon+".png");
        document.querySelector("#descripcion").textContent = vars3[0].description;
    
    })
}

function comprobar(){
   if(flag==false) {
       alert("error");
   } else {
       flag =false;
       alert("hola")
   }   
}
3
  • puedes quitar el comprobar() dentro del addEventListener de el boton, agrega el comprobar() dentro y al final de la funcion clima(), prueba y dime si te funcionó
    – Enzo
    Commented el 30 ago. 2021 a las 20:21
  • @enzo Ya lo había intentado, pero sigue haciendo lo mismo. Commented el 30 ago. 2021 a las 20:32
  • 1
    recuerda que getJSON recibe un callback, agrega la funcion comprobar() dentro y al final de ese callback
    – Enzo
    Commented el 30 ago. 2021 a las 20:35

1 respuesta 1

1

Problema

El problema es que $.getJSON() es una función asíncrona.

Por lo tanto el programa segirá ejecutando la siguiente función hasta que la API de openweather devuelva una respuesta.

Cuando la API devuelva una respuesta, el callback que enviaste como segundo parámetro de getJSON(url, callback), va a manejar dicha respuesta.

Sin embargo, mientras la API no devuelva nada, la ejecución del programa seguirá normalmente, esto es para no bloquear el hilo principal de ejecución de Javascript.

Solución

Para solucionar esto puedes hacer uso del método .fail() que devuelve la función getJSON() para comprobar si hubo un error (Dale en "Ejecutar" para verlo funcionando):

let enviar = document.querySelector("#correcto");
let enviarErroneo = document.querySelector("#erroneo");
let city = document.querySelector("#city")
let flag = false;
let a;
clima.on;
enviar.addEventListener("click",function(){    
   clima("london");
   //comprobar() // No es necesario
});
enviarErroneo.addEventListener("click",function(){    
   clima("ciudadinexistente");
});

function clima(city){
    $.getJSON("https://api.openweathermap.org/data/2.5/weather?q=" + city + "&appid=95176c8edea30e33338e0eaddd53a916&units=metric",
  function(data){ // Este es el callback que maneja la respuesta de la API
    document
      .querySelector(".container").style.visibility = "visible";    
        flag = true;
        let vars = data.main; // Te recomiendo que le des nombres descriptivos a las variables
        let vars2 = data.sys;
        let vars3; 
        vars3 = (data.weather);
        document.querySelector("#pais").textContent = vars2.country;
        document.querySelector("#temperatura").textContent = vars.temp;
        document.querySelector("#grados").innerHTML = "<sup>°C</sup>";
        document.querySelector("#wicon").setAttribute("src","http://openweathermap.org/img/wn/"+vars3[0].icon+".png");
        document.querySelector("#descripcion").textContent = vars3[0].description;
    
    })
  .fail(function() { // Si falla porque no encontró la ciudad, va a ejecutar esta función
    console.log( "error" );
  })
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="correcto">Enviar</button>
<button id="erroneo">Enviar con error</button>
<div id="city">London</div>
<div class="container">
  <div id="ciudad"></div>
  <div id="pais"></div>
  <div id="temperatura"></div>
  <div id="grados"></div>
  <div id="wicon"></div>
  <div id="descripcion"></div>
</div>

Te dejo algunos links para que leas más sobre asincronía en javascript:

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.