JSON es la abreviatura de Javascript Objecto Notation y se trata de una forma de almacenar información de forma organizada y de fácil acceso.
var aNieto2k = {
"edad" : "28",
"ciudad" : "Palma de Mallorca, ES",
"genero" : "hombre"
};
A simple vista se obtiene una estructura muy clara y que ayuda a su comprensión. En este ejemplo hemos definido un pequeño objeto JSON llamado aNieto2k compuesto de una serie de atributos. De esta forma, podemos usarlos posteriomente siguiendo la siguiente estructura.
alert("aNieto2k tiene " + aNieto2k.edad + " años");
Funciones (no para transportar información)
Gracias a la versatilidad de las variables en Javascript nos es posible igualar uno de estos atributos a una función, generando así un método propio del objeto:
var aNieto2k = {
"edad" : "28",
"ciudad" : "Palma de Mallorca, ES",
"genero" : "hombre",
"saludar" : function(aquien) {
alert("Hola, soy aNieto2k de " + this.ciudad + ", ¿Como estás " + aquien + "?");
},
};
Ahora ya puedo saludar() 😀
aNieto2k.saludar("Usuario");
Al formar parte del objeto JSON, podemos hacer uso de los atributos desde el propio método mediante el uso del operador this.
Las funciones no tienen sentido para el uso de JSON como transportador de información, así que únicamente lo dejamos como una curiosidad de la notación de objetos 😀
Arrays
Otra facultad de los elementos JSON es la capacidad de insertar arrays como atributos y asu vez dentro definimos elementos JSON:
var aNieto2k = {
"edad" : "28",
"ciudad" : "Palma de Mallorca, ES",
"genero" : "hombre",
"saludar" : function(aquien) {
alert("Hola, soy aNieto2k de " + this.ciudad + ", ¿Como estás " + aquien + "?");
},
"proyectos":[
{
"nombre" : "iMeneame.net",
"url" : "http://www.imeneame.net"
},
{
"nombre" : "BlogoEdad",
"url" : "http://edad.anieto2k.com"
}
]
};
De esta forma podemos recorrerlos como arrays que son:
var proyectos = aNieto2k.proyectos, html = '';
for (var x = 0 ; x < proyectos.length ; x++) {
html += '<li><a href="' + proyectos[x].url + '">' + proyectos[x].nombre + '</a></li>';
}
Encadenando objetos JSON
Otra forma de agrupar elementos JSON es la de usar objetos JSON embebidos dentro de otros objetos JSON:
var aNieto2k = {
"edad" : "28",
"ciudad" : "Palma de Mallorca, ES",
"genero" : "hombre",
"saludar" : function(aquien) {
alert("Hola, soy aNieto2k de " + this.ciudad + ", ¿Como estás " + aquien + "?");
},
"proyectos":{
"imeneame": {
"url" : "http://www.imeneame.net"
},
"blogoedad": {
"url" : "http://edad.anieto2k.com"
}
}
};
Como podemos ver, realmente lo único que hemos hecho es insertar un objeto JSON dentro de un atributo padre, por lo que podemos acceder a el de la siguiente forma:
var URL = aNieto2k.proyectos.imeneame.url;
Úsos prácticos
Como sistema de almacenaje de datos, es perfecto para transportarlos de una página a otra, incluso de un sitio web a otro. Un ejemplo muy sencillo y recurrido es la posibilidad de obtener datos de Flickr mediante el uso de jQuery para obtener estos datos.
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?",
function(data){
$.each(data.items, function(i,item){
$("<img/>").attr("src", item.media.m).appendTo("#images");
if ( i == 3 ) return false;
});
});
En este ejemplo, sacado de la documentación de jQuery, vemos como lanzamos una petición de las últimas imagenes enviadas a Flickr que hayan sido catalogadas con el tag «Cat». El resultado será evaluado y procesado para al final llegarnos a nosotros dentro de data, una variable que podremos recorrer como si de una variable estuvieramos hablando.
JSON nativo
Uno de los problemas encontrados con JSON es la evaluación de código, ya que este debe ser transformado en una variable para poder usarla y esto requiere el uso de eval() lo que hace que el tiempo de proceso se incremente considerablemente (ya vimos algo al respecto).
// Eval
var myObject = eval('(' + myJSONtext + ')');
// JSON Nativo
var myObject = JSON.parse(myJSONtext);
// Mix
var myObject = (JSON)?JSON.parse(myJSONtext): eval('(' + myJSONtext + ')');
Por suerte, los navegadores modernos (IE8, FF3.5, WebKit, ….) están implementado funcionalidades para olvidarnos de eval() y mejorar considerablemente el tiempo de proceso.
