Duda en ejercicio 2 Ajax

No entiendo porque motivo la temperatura actual la mínima y la máxima tienen el mismo valor. Es como si sobrescribiera el resultado de la función conversionCelsius. ¿Es porque necesita dicha llamada un callback a dicha función?

2 - Sacar en el html el tiempo meteorológico de Madrid, Barcelona y Valencia. Nota: http://openweathermap.org te será de gran ayuda, busca la solución al error 401


var contenido = '';

function elTiempo (ciudad) {

  var xmlHttp = new XMLHttpRequest();

  var yourApiKey = 'c9db43f368606978d0a1347aa2632cb2';
  var url = 'http://api.openweathermap.org/data/2.5/weather?q=' + ciudad + '&APPID=' + yourApiKey;
    var infoTiempo;

  xmlHttp.onreadystatechange = function() {

    if (xmlHttp.readyState === 4 && xmlHttp.status === 200) {

      //console.info(JSON.parse(xmlHttp.responseText));

      infoTiempo = JSON.parse(xmlHttp.responseText);

      contenido += '<p><b>Ciudad: </b>' + infoTiempo.name+ '</p>';
      contenido += '<p>' + infoTiempo.weather[0].description+ '</p>';
      contenido += '<p><b>Temperatura: </b>' + conversionCelsius( infoTiempo.main.temp ) + 'ºC</p>';
       contenido += '<p><b>T.Máxima: </b>' + conversionCelsius( infoTiempo.main.temp_max ) + 'ºC</p>';
       contenido += '<p><b>T.Mínima: </b>' + conversionCelsius( infoTiempo.main.temp_min ) + 'ºC</p>';
      contenido += '<hr>';

      document.body.innerHTML = contenido;

    } 

    else if (xmlHttp.readyState === 4 && xmlHttp.status === 404) {

      infoTiempo = JSON.parse(xmlHttp.responseText);
      console.error("ERROR! 404");
      console.info(infoTiempo);

    }

  };

  xmlHttp.open("GET", url, true);
  xmlHttp.send();

}

function conversionCelsius (gradosKelvin) {

  return parseInt(gradosKelvin) - 273;
}

// Llamada 

elTiempo ('Madrid');
elTiempo ('Barcelona');
elTiempo ('Valencia');

Hola @Stelair!

En un principio... lo que veo es que los valores en el API son correctos.

{"coord":{"lon":-3.7,"lat":40.42},"weather":[{"id":800,"main":"Clear","description":"clear sky","icon":"01d"}],"base":"stations","main":{"temp":283.2,"pressure":1015,"humidity":29,"temp_min":282.55,"temp_max":284.15},"visibility":10000,"wind":{"speed":2.6,"deg":10},"clouds":{"all":0},"dt":1457958600,"sys":{"type":1,"id":5488,"message":0.0313,"country":"ES","sunrise":1457936796,"sunset":1457979686},"id":3117735,"name":"Madrid","cod":200}

La función de cálculo es correcta aunque se podría afinar un poco más (0 grados = -273,15).

// Original
conversionCelsius(282.55); // retorna 9
conversionCelsius(284.15) // retorna 11

// Modificado (sacando dos decimales y haciendo los cálculos con decimales)
function conversionCelsius (gradosKelvin) {
  return (parseFloat(gradosKelvin) - 273.15).toFixed(2);
}

Pero mirando en detalle la documentación podemos ver que la propia API nos puede facilitar este trabajo añadiendo la unidad (&units=metric) a la URL.

// http://api.openweathermap.org/data/2.5/weather?q=Madrid&APPID=c9db43f368606978d0a1347aa2632cb2&units=metric
{"coord":{"lon":-3.7,"lat":40.42},"weather":[{"id":800,"main":"Clear","description":"clear sky","icon":"01d"}],"base":"stations","main":{"temp":10.04,"pressure":1015,"humidity":29,"temp_min":9.4,"temp_max":11},"visibility":10000,"wind":{"speed":2.6,"deg":10},"clouds":{"all":0},"dt":1457958600,"sys":{"type":1,"id":5488,"message":0.0286,"country":"ES","sunrise":1457936795,"sunset":1457979687},"id":3117735,"name":"Madrid","cod":200}

Incluso podemos recibir la información en español añadiendo el lenguaje en la url (&lang=es)

// http://api.openweathermap.org/data/2.5/weather?q=Madrid&APPID=c9db43f368606978d0a1347aa2632cb2&units=metric&lang=es

{"coord":{"lon":-3.7,"lat":40.42},"weather":[{"id":800,"main":"Clear","description":"cielo claro","icon":"01d"}],"base":"stations","main":{"temp":10.02,"pressure":1015,"humidity":29,"temp_min":9.4,"temp_max":11},"visibility":10000,"wind":{"speed":2.6,"deg":10},"clouds":{"all":0},"dt":1457958600,"sys":{"type":1,"id":5488,"message":0.0441,"country":"ES","sunrise":1457936795,"sunset":1457979687},"id":3117735,"name":"Madrid","cod":200}

Nos vemos en un rato!

Fictizia / Curso-JS-para-desarrolladores-web_ed5

Duda en ejercicio 2 Ajax #11