1

Estoy haciendo una web que muestra el clima local, ya me han dado una mano y me esta costando bastante terminarla, quisiera saber como cambiar la función alertMsg para que me devuelva los datos del clima en vez de el link necesario para pedir los datos (que es lo que me devuelve ahora).

Éste es mi código (también disponible en codepen):

function getGeo(callback) {
  //better to have variables inside the local scope of a function 
  //rather than the global scope. This prevents polluting the file
  //with names that might end up being repeated

  //initial values of null so that if nothing is passed you can check
  //for that instance
  var latitiude=null,
      longitude=null;
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      latitude= position.coords.latitude;
      longitude=position.coords.longitude;
      console.log(latitude, longitude);
      link = 'api.openweathermap.org/data/2.5/weather?lat={'+latitude+'}&lon={'+longitude+'} ';
      //this will pass link to the callback function
      callback(link);
    });
  };
};

//alertMsg recieves the link from getGeo when used as a callback
//THIS IS THE FUNCTION I WANT TO CHANGE
function alertMsg(data) {
  data = $.getJSON(data);
};

//callback from getGeo to alertMsg when button is clicked
document.getElementById("action-button-id").addEventListener("click", function(){
  getGeo(alertMsg);
});
body {
  background-color: lightblue;
}

/*remove once done*/
button.action-button{
  position:relative;
  margin-left:50%;
  transform:translateX(-50%);
  border: none;
  background:lightblue;
  outline:none;
  font-weight: 400;
  border: solid black 1px;
  border-radius: 8px;
  transition: all 0.4s ease-in;
  cursor:pointer;
}

/*remove once done*/
button.action-button:hover{
  background:black;
  color:lightblue;
}
/* remove once done*/
button.action-button:active{
  transform:translateX(-50%) scale(0.95);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />

<div class="container text-center">
  <h1>Your local weather app</h1>
  <h3 id="city">City</h3>
  <h3 id="country">Country</h3>
  <h4 id="temp">Temperature</h4>
  <h4 id="weather">Weather</h4>    
  <h5 id="icon">Icon</h5>
  <p>By <a href="https://www.freecodecamp.com/abeledovictor" target="_blank">Victor Abeledo</a></p>
</div>

<button class="action-button" id="action-button-id">
  Click me for data
</button>

1 respuesta 1

2

Hay un error a la hora de formar la URL de la llamada a la API. Ahora mismo está así:

link = 'api.openweathermap.org/data/2.5/weather?lat={'+latitude+'}&lon={'+longitude+'} ';

Al no especificar un protocolo, el navegador sobreentiende que es una URL relativa al sitio actual, con lo cual si tu página es http://mipagina.com, la petición se estará haciendo a http://mipagina.com/api.openweathermap.org/data/... que no es lo que quieres.

Deberías añadir el protocolo a la hora de hacer la petición:

link = 'http://api.openweathermap.org/data/2.5/weather?lat={'+latitude+'}&lon={'+longitude+'} ';

Ahora sí que se realiza la petición a OpenWeatherMap... pero la URL no está completa porque falta la clave de la API y recibirás el siguiente error:

{"cod":401, "message": "Invalid API key. Please see http://openweathermap.org/faq#error401 for more info."}

Para solucionar ese error, tendrás que visitar su sitio web y obtener una clave de API (si no lo has hecho ya)


EDICIÓN. Aparte, como pongo en los comentarios de abajo, tendrías que hacer un par de modificaciones en el código para que funcione:

  1. Debes pasar la clave de API en el parámetro APPID como se especifica en la documentación
  2. Según este otro artículo de la documentación, los valores de lat y lon no van entre llaves, sino directamente como parámetro.

Con esos dos cambios, la petición debería ser algo como esto:

link = 'http://api.openweathermap.org/data/2.5/weather?lat='+latitude+'&lon='+longitude+'&APPID='+tuClaveDeAPI;

Me he creado una cuenta para probarlo, he obtenido mi APPID y con la siguiente url:

http://api.openweathermap.org/data/2.5/weather?lat=42.5129103&lon=-83.0569912&appid=AQUI_VA_MI_APPID

obtengo el siguiente resultado:

{  
   "coord":{  
      "lon":-83.03,
      "lat":42.49
   },
   "weather":[  
      {  
         "id":802,
         "main":"Clouds",
         "description":"scattered clouds",
         "icon":"03d"
      }
   ],
   "base":"cmc stations",
   "main":{  
      "temp":302.47,
      "pressure":1013,
      "humidity":45,
      "temp_min":298.15,
      "temp_max":306.15
   },
   "wind":{  
      "speed":5.7,
      "deg":190
   },
   "clouds":{  
      "all":40
   },
   "dt":1469663006,
   "sys":{  
      "type":1,
      "id":1397,
      "message":0.0127,
      "country":"US",
      "sunrise":1469614847,
      "sunset":1469667349
   },
   "id":4988400,
   "name":"Center Line",
   "cod":200
}
4
  • Gracias por la aclaracion. Si ya tengo la clave de la api, pero como es el codigo para hacer la peticion a openWeatherMap, debo escribir el codigo en link, en getGeo o en alertMsg?? tampoco se que formato usar
    – victor.ja
    el 27 jul. 2016 a las 15:07
  • @victor.ja según la documentación, la clave de la API se pasa con APPID=tu-clave-de-api. Además, estarías pasando mal los parámetros, según la documentación los valores de lat y lon no van entre llaves. Con eso, la petición debería ser algo como esto: link = 'http://api.openweathermap.org/data/2.5/weather?lat='+latitude+'&lon='+longitude+'&APPID='+tuClaveDeAPI;
    – Alvaro Montoro
    el 27 jul. 2016 a las 23:35
  • @victor.ja he actualizado la respuesta con un ejemplo y el resultado que obtengo al abrir la URL
    – Alvaro Montoro
    el 27 jul. 2016 a las 23:50
  • genial muchas gracias, ya mismo lo pruebo!!!
    – victor.ja
    el 28 jul. 2016 a las 1:49

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.