Contenido

Todo lo que siempre quisiste saber sobre JSON

6 jul

+ 7

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() :D

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 :D

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.

  • Cuidado! el ejemplo, que incluye funciones no es JSON valido. es mas bien un ejemplo de como utilizar la notación de objetos de javascript para crear un objeto en particular. En cambio JSON ha sido pensado por Douglas Crockford, como un formato de intercambio de datos (algo así como para competir con XML) y es por eso que como tal, no sería correcto hablar de metodos o funciones dentro de una cadena JSON, y los validadores JSON como el de YUI (yahoo user interface) o el JSON Editor publicado en esta página, no vlidaran un objeto JSON que contenga una funcion.

    Saludos y Seguí asi porque te leo todos los días

  • @Alejandro: Gracias por el aviso, no había pensado en ello.

    Corregido.

  • Sobre la sentencia

    // Mix
    var myObject = (JSON)?JSON.parse(myJSONtext): eval(‘(‘ + myJSONtext + ‘)’);

    no consigo que me funcione en los navegadores con Webkit, es decir Safari y Chrome.

    Un saludo.

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.