La API de openweathermap es una API que nos permite obtener datos del clima.
Los datos los entrega en formato json
Al final esta un txt con el código, es para html
En corto:
{llave, valor}
{objeto:{llave, valor}}
Pasos
Primero vamos a openweathermap.org
le dan a SignUp y crean una cuenta
Con esa cuenta van a generar una apikey para hacer las peticiones
Es una cuenta gratuita, pero da para una app abierta, pruebas o uso propio
Ejemplo
Les muestro el ejemplo
Esta seria una petición desde un navegador
http://api.openweathermap.org/data/2.5/weather?q=Cancun&appid=APIKEY
Estoy pidiendo el clima de Cancún
Me devuelve un json
{"coord":{"lon":-86.85,"lat":21.17},"weather":[{"id":803,"main":"Clouds","description":"broken clouds","icon":"04d"}],"base":"stations","main":{"temp":300.15,"pressure":1018,"humidity":69,"temp_min":300.15,"temp_max":300.15},"visibility":11265,"wind":{"speed":3.6,"deg":40},"clouds":{"all":75},"dt":1514663040,"sys":{"type":1,"id":3969,"message":0.0047,"country":"MX","sunrise":1514636668,"sunset":1514675800},"id":3531673,"name":"Cancun","cod":200}
Recorrer el json
Voy a recorrer el json(es una especie de objeto, a la vez puede tener objetos adentro)
Guardamos los datos en variables
var longitud;
var latitud;
var ciudad;
var pais;
var id;
var principal;
var descripcion;
var maxima;
var minima;
var actual;
var presion;
var humedad;
var visibilidad;
var vientoVelocidad;
var vientoAngulo;
var nubes;
Hacemos la petición, y recorremos el json
$.getJSON("http://api.openweathermap.org/data/2.5/weather?q=Cancun&appid=APIKEY", function (data) { //Aquí va el código });
$.each(data, function (key, val) {
switch (key) {
case "name":
ciudad = val;
break;
}
La llave name es una llave valor en la "raíz" del arbol, la puedo extraer directamente.
Pero hay objetos que tienen varias llaves y valores. Estos objetos tienen su nombre como una llave, y llaves valor adentro.
En ese caso recorremos los objetos uno a uno
$.each(data, function (key, val) {
switch (key) {
//coordenadas
case "coord":
$.each(val, function (key, val) {
switch (key) {
case "lon":
longitud = val;
break;
case "lat":
latitud = val;
break;
}
});
break;
...
Recolectamos los datos en las variables y las mostramos o lo que queramos
Me los devuelve en Kelvin, por lo que hay que restar, pero deja demasiados decimales
un poco de estilo y queda decente
Bien puede meterse en un script
Creamos una tabla o lo que se le parezca
Obviamente fuera del script
<div class="col-md-2">
<div class="list-group-item">Ciudad: <span id="ciudad"></span></div>
<div class="list-group-item">Temperatura: <span id="temp"></span></div>
<div class="list-group-item">Máxima:<span id="max"></span></div>
<div class="list-group-item">Mínima:<span id="min"></span></div>
<div class="list-group-item">Humedad:<span id="hum"></span></div>
</div>
Dejo el archivo si no les quedo claro
El estilo es por bootstrap
https://drive.google.com/file/d/1QsNOnaXdonpIa-G5bZ-YGptt5VqnnHQk/view?usp=sharing
Los datos los entrega en formato json
Al final esta un txt con el código, es para html
En corto:
{llave, valor}
{objeto:{llave, valor}}
Pasos
Primero vamos a openweathermap.org
le dan a SignUp y crean una cuenta
Con esa cuenta van a generar una apikey para hacer las peticiones
Es una cuenta gratuita, pero da para una app abierta, pruebas o uso propio
Ejemplo
Les muestro el ejemplo
Esta seria una petición desde un navegador
http://api.openweathermap.org/data/2.5/weather?q=Cancun&appid=APIKEY
Estoy pidiendo el clima de Cancún
Me devuelve un json
{"coord":{"lon":-86.85,"lat":21.17},"weather":[{"id":803,"main":"Clouds","description":"broken clouds","icon":"04d"}],"base":"stations","main":{"temp":300.15,"pressure":1018,"humidity":69,"temp_min":300.15,"temp_max":300.15},"visibility":11265,"wind":{"speed":3.6,"deg":40},"clouds":{"all":75},"dt":1514663040,"sys":{"type":1,"id":3969,"message":0.0047,"country":"MX","sunrise":1514636668,"sunset":1514675800},"id":3531673,"name":"Cancun","cod":200}
Recorrer el json
Voy a recorrer el json(es una especie de objeto, a la vez puede tener objetos adentro)
Guardamos los datos en variables
var longitud;
var latitud;
var ciudad;
var pais;
var id;
var principal;
var descripcion;
var maxima;
var minima;
var actual;
var presion;
var humedad;
var visibilidad;
var vientoVelocidad;
var vientoAngulo;
var nubes;
Hacemos la petición, y recorremos el json
$.getJSON("http://api.openweathermap.org/data/2.5/weather?q=Cancun&appid=APIKEY", function (data) { //Aquí va el código });
$.each(data, function (key, val) {
switch (key) {
case "name":
ciudad = val;
break;
}
La llave name es una llave valor en la "raíz" del arbol, la puedo extraer directamente.
Pero hay objetos que tienen varias llaves y valores. Estos objetos tienen su nombre como una llave, y llaves valor adentro.
En ese caso recorremos los objetos uno a uno
$.each(data, function (key, val) {
switch (key) {
//coordenadas
case "coord":
$.each(val, function (key, val) {
switch (key) {
case "lon":
longitud = val;
break;
case "lat":
latitud = val;
break;
}
});
break;
...
Recolectamos los datos en las variables y las mostramos o lo que queramos
Me los devuelve en Kelvin, por lo que hay que restar, pero deja demasiados decimales
un poco de estilo y queda decente
Bien puede meterse en un script
Creamos una tabla o lo que se le parezca
Obviamente fuera del script
<div class="col-md-2">
<div class="list-group-item">Ciudad: <span id="ciudad"></span></div>
<div class="list-group-item">Temperatura: <span id="temp"></span></div>
<div class="list-group-item">Máxima:<span id="max"></span></div>
<div class="list-group-item">Mínima:<span id="min"></span></div>
<div class="list-group-item">Humedad:<span id="hum"></span></div>
</div>
Dejo el archivo si no les quedo claro
El estilo es por bootstrap
https://drive.google.com/file/d/1QsNOnaXdonpIa-G5bZ-YGptt5VqnnHQk/view?usp=sharing