Una variable puede almacenar números, booleanos o "varios caracteres en cadena".
Una variable también puede contener un arreglo, en el que es posible almacenar números, booleanos o "varios caracteres en cadena". Por ejemplo: var unArreglo = [18, true, "Wingardium Leviosa"]
Luego puede consultarse cada elemento almacenado según su posición, así, por ejemplo, unArreglo[2]
es Wingardium Leviosa
(recuerden que la primera posición es 0).
Una variable también puede contener un objeto, en el que pueden almacenarse números, booleanos, "varios caracteres en cadena" o [arreglos], manteniendo una estructura donde se repetie una relación de pares donde uno denomina y otro contiene lo denominado. Por ejemplo:
var unObjeto = { pais : "Chile", raza: false, habitantes: 17374000}
Luego puede consultarse cada contenido por su denominación. Así, por ejemplo, unObjeto.habitantes
es 17374000
JSON se inspira en el objeto de JavaScript, al nivel de deberle su nombre (JavaScript Object Notation). Pero hay diferencias que hacen imposible meter, a la fuerza y directamente, el contenido de un JSON validado a una variable de JavaScript. Antes es necesario "parsear" ese JSON; esto es analizar su contenido y extraer sus valores al modo que corresponda.
A continuación copio y pego un JSON, y en la consola del navegador está impreso el resultado de analizar el contenido de ese mismo JSON y extraer los valores a la manera que pueden almacenarse en una variable de Javascript (en este caso, como un arreglo de 2 objetos).
[{
"name":"Darth Vader",
"height":202,
"mass":136,
"hair_color":"none",
"skin_color":"white",
"eye_color":"yellow",
"birth_year":"41.9BBY",
"gender":"male",
"homeworld":"Tatooine",
"url":"https://swapi.co/api/people/4/"
},
{
"name": "Anakin Skywalker",
"height": "188",
"mass": "84",
"hair_color": "blond",
"skin_color": "fair",
"eye_color": "blue",
"birth_year": "41.9BBY",
"gender": "male",
"homeworld": "Tatooine",
"url": "https://swapi.co/api/people/11/"
}]
A la variable de JavaScript que contiene este arreglo, con los dos objetos, la nombré starwars. Con esa información, ustedes podrían adelantarse al resultado de pedirle a la consola lo almacenado en starwars[0].name
Esto se pone interesante cuando podemos parsear un JSON que está en línea, siendo constantemente actualizado. Con ello podemos hacer cosas como las siguientes:
http://api.open-notify.org/astros.json | Ejemplo 1 | Ejemplo 2 |
http://api.open-notify.org/iss-now.json | Ejemplo 1 | Ejemplo 2 |
https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_week.geojson | Ejemplo |
En los ejemplos de la tabla, y en las páginas weather.html y earthquake.html uso este script:
var request = new XMLHttpRequest();
request.open('GET', 'URI', true);
request.onload = function () {
var data = JSON.parse(this.response);
//acá agregaremos más…
}
request.send();
Lo que es clave en este script es el uso del objeto XMLHttpRequest. Para comprenderlo, se recomienda revisar:
Diseño y Nuevos Medios