Tutorial JSON
http://www.desarrolloweb.com/manuales/manual-jquery.html
by Carlos Benítez in Javascript, JSON
11
En un post anterior, comentaba como el formato JSON estaba desbacando al XML en las
aplicaciones web: los servicios online más punteros como Foursquare o Twitter están
orientando sus APIs hacia este formato convertido en estándar debido a su faclidad de uso,
portabilidad y legibilidad.
Actualmente, la cosa va más allá y están empezando a popularizarse lenguajes derivados
como el JSONP del que hablaremos en breve. Sin embargo, centremos ahora nuestra
atención en JSON y en todo el potencial que encierra para la transmisión de datos vía
Internet.
Qué es JSON?
JSON es un acrónimo de JavaScript Object Notation, un formato ligero originalmente
concebido para el intercambio de datos en Internet. Se considera un subconjunto de la
notación literal para representar objetos, arrays, cadenas, booleanos y números en
Javascript.
Su popularización llegó sobre 2001 gracias al apoyo incondicional de Douglas Crockford.
Yahoo! ayudó en gran manera a su difusión a raíz de la inclusión de este formato en
algunos de sus servicios web más innovadores. En diciembre de 2006, Google comenzaría
a ofrecer sus feeds en JSON para su protocolo web GData.
Pese a que JSON se basa en la notación Javascript, está considerado como un lenguaje
independiente de formato de datos cuya especificación es descrita en RFC4627.
Anatomía de un objeto JSON
La anatomía de un marcado JSON es casi idéntica a la de un objeto Javascript. Veamos un
ejemplo:
{
"id" : "0001",
"type" : "donut",
"name" : "Cake",
"image" : {
"url" : "images/0001.jpg",
"width" : 200,
"height" : 200
},
"thumbnail" : {
"url" : "images/thumbnails/0001.jpg",
"width" : 32,
"height" : 32
},
"dateEntry" : "2010-12-05"
}
Como podemos observar, este ejemplo es prácticamente idéntico a la definición de un
objeto en Javascript: todo el marcado queda enmarcado entre dos llaves dentro de las
cuales, se definen parámetros siguiendo el esquema de pares ‘nombre-valor’. Cada uno de
los términos va invariablemente delimitado por comillas, algo que en Javascript no es
siempre necesario pero si recomendable.
NOTA: Para comprobar la validez de un marcado JSON existen un par de herramientas
online de gran valor: JSONFormatter y JSONLint. En ambos sitios, podemos pegar nuestro
código para que sea validado y reformateado.
Particularidades de JSON sobre Javascript
Algunas de las particularidades o reglas del formato JSON a tener en cuenta son:
Los pares nombre-valor van siempre delimitados por comillas, independientemente
de si se tratan de nombres válidos en Javascript que podrían aparecer sin ellas.
JSON puede representar seis tipos de valores: objetos, arrays, numeros, cadenas,
booleanos y null.
Las fechas no son reconocidas como un tipo de objeto propio.
Los numeros en JSON no pueden ir predecidos de ceros salvo en el caso de
notación decimal ( Ejm: 0.001 ).
En definitiva, como JSON es considerado un lenguaje independiente, sus objetos deben ser
considerados como cadenas Javascript, no como objetos nativos.
Usando JSON en Javascript
El verdadero potencial de JSON es su integración con Javascript. Esto permite un fácil
intercambio de datos entre aplicaciones mediante peticiones XHR al servidor a la vez que
abre posibilidades ilimitadas a nuevos paradigmas de gestión como los emergentes sistemas
No-SQL.
Para permitir que un objeto JSON sea utilizado por Javascript, debemos parsearlo
(interpretarlo) mediante el uso del comando eval() tal y como se muestra a continuación:
var myCakes = eval('(' + cakeJSON + ')');
alert(myCakes.name); // donut
alert(myCakes.image.width); // 200
A través de eval(), interpretamos el objeto JSON y lo convertimos en una entidad (objeto)
Javascript; esto permite acceder a sus propiedades directamente como con cualquier otro
objeto.
Obsérvese que es necesario un doble paréntesis para evitar la ambigüedad con la que
Javascript interpreta las llaves con las que comienza el objeto JSON.
NOTA: Para acceder a las propiedades del objeto, utilizamos la notación con punto en
lugar de corchetes tal y como recomiendan los expertos:
alert( myCakes[thumbnail][height] ); // Peor
alert( myCakes.thumbnail.height ); // Mejor
Las transacciones XHR, por seguridad, están limitadas únicamente al ámbito del dominio
que hace la petición, por lo tanto, cuando se recibe una respuesta, podemos estar 100%
seguros de que ésta, proviene del propio dominio. Sin embargo, eso no tiene por que
librarnos de un error del servidor o de una redirección maliciosa que nuestro eval() a ciegas
puede convertir en desastre.
Siempre es útil recordar ese mantra que inunda foros y artículos y que suele ser lo primero
que se graba a fuego en la conciencia de un programador Javascript: eval is evil. Para evitar
todos los problemas derivados de una incorrecta interpretación de nuestro código, podemos
hacer uso de algunas herramientas de terceros.
Parseando JSON de forma segura
Existen diversas formas que permiten prescindir de eval() delegando la tarea en métodos
más seguros.
En jQuery, tenemos por ejemplo el método parseJSON que comprueba la integridad del
marcado antes de evaluarlo.
Mootols ofrece también su propio método, JSON.encode(), que realiza una tarea similar al
anterior ejemplo de jQuery.
Sin embargo, con la llegada del ECMAScript 5, se ha implementado un nuevo objeto JSON
basado en la API programada por el propio Douglas Crockford. Sus métodos más
interesantes son parse() y stringify().
JSON.parse ofrece un eval() seguro a través de su filtrado mediante expresiones regulares.
Si la cadena no es un objeto JSON válido, devuelve un error de sintaxis y el eval no es
llamado.
La sintaxis de este comando es la siguiente:
JSON.parse( string $JSONString [, function $reviver ] );
El primer parámetro recoje la cadena JSON mientras que el segundo, opcional, acepta una
función para el tratamiento de dicha cadena. Esta función recoge dos parámetros (clave y
valor) y por cada registro del objeto Javascript que estamos componiendo, se evalúan sus
pares según el criterio definido. Este método resulta muy práctico para, por ejemplo,
convertir las cadenas de fechas en objetos Javascript:
function dateReviver(key, value) {
if (typeof value === 'string') {
var a = /^(\d{4})-(\d{2})-(\d{2})$/.exec(value);
if (a) {
return new Date(Date.UTC(+a[1], +a[2] - 1, +a[3]));
}
}
return value;
};
var myObj = JSON.parse( myStringJSON, dateReviver);
myObj.dateEntry; //Sat Dec 04 2010 16:00:00 GMT-0800 (Pacific Standard
Time)
JSON.stringify hace la operación contraria. Su sintaxis es la siguiente:
JSON.stringify( obj $value [, $replacer] [, @space] );
El primer parámetro $value suele ser un objeto Javascript (o un array) y es a partir del cual,
obtenemos la cadena JSON correspondiente.
El segundo parámetro, $replacer, si es una función, actúa básicamente como el $reviver
anterior pero de modo inverso. Sin embargo, si le proporcionamos un array, actúa como
una lista blanca de aquellas propiedades del objeto que serán serializadas.
El tercer parámetro, $space, puede ser un número o una cadena. En el primer caso,
representa el número de espacios en blanco con el que será indentado cada nivel de nuestro
JSON. Si usamos una cadena, cada uno de los pares aparecerá indentado con el caracter que
hayamos definido. Por lo general, usaremos los caracteres de escape Javascript para indicar
tabulaciones o saltos de línea (el más común será ‘\t’ para indicar una tabulación
horizontal).
JSON.stringify(myObj, ['id','type','name'], '\t')
/*
'{
"id" : "0001",
"type" : "donut",
"name" : "Cake"
}'
*/
Como podemos ver, el uso de un $replacer resulta interesante para filtrar aquellos pares
clave-valor que no nos interesan en un momento dado.
Podemos encontrar ambas funciones en la mayoría de navegadores modernos con la
excepción de IE7. Asen Bozhilov ha compilado una tabla comparativa con las diferentes
formas en que los fabricantes han implementada JSON.parse.
Más Informacion:
Angus Croll. JSON and JSONP
Douglas Crockford. JSON
Andrés Nieto. Toma de contacto con JSON
Add to Meneame
Post to Facebook
Comprobar si una propiedad existe en un objeto JS
Una de las acciones más habituales cuando programamos Javascript orientado a objetos, es
comprobar si en una propiedad existe en un objeto determinado.
Para ello, podemos utilizar alguna de las siguientes formas:
// Creamos un objeto
var person = {};
person.name = 'Etnas';
// Asignamos propiedades
person.company = 'EtnasSoft';
// Mostramos las propiedades:
alert( person.name ); // 'Etnas';
alert( person.lastName ); // undefined
Como person.lastName no ha sido definido podemos obtener un comportamiento no
deseado en nuestro script. Para comprobar si existe la propiedad o no, podemos recurrir a
un condicional:
if( person.lastName ) {
// La propiedad existe
}
Sin embargo, este método no funciona correctamente cuando la propiedad existe, pero tiene
un valor falsy ( false, “”, null, undefined, 0, NaN ). Por lo que:
person.lastName = '';
if( person.lastName ) {
// La propiedad existe, tiene un valor, pero no pasa el test.
}
Para solucionar este problema, tenemos que recurrir a uno de los métodos de Object:
hasOwnProperty. Al crear un objeto, además de disponer de aquellos métodos que
definamos, siempre hereda los propios de Object, por lo que podemos utilizarlo sin más:
if( person.hasOwnProperty('lastName') ) {
// La propiedad existe, sea cual sea su valor
}
Mediante una comprobación de declaración implícita, podemos asignar un valor por
defecto a nuestro método:
if ( person.hasOwnProperty( lastName ) || ( person.lastName = 'Soft' ) ) {
alert(person.lastName);
};
Con esto, conseguiremos que nuestras aplicaciones sean más robustas chequeando las
propiedades de nuestros objetos antes de utilizarlas.
CACHANDO OBJETOS CON QUERY
Cuando utilizamos jQuery para la selección y manipulación de elementos del DOM, una
práctica que a menudo olvidan los programadores es cachear los objetos.
Tomemos el siguiente código de ejemplo:
$('#myObjId').click(function() {
if ( $('#myObjId').hasClass('clicked') ) {
$('#myObjId').removeClass('clicked');
$('#myObjId').css('background-color', 'red');
} else {
$('#myObjId').addClass('clicked');
$('#myObjId').css('background-color', 'blue');
}
);
$('#myObjId').val('Click Me!');
Con este fragmento comprobamos cómo cada vez que se realiza una acción, el selector
interno de jQuery (Sizzle), debe recorrer el DOM completamente hasta encontrar el
elemento sobre el que estamos operando, lo cual, dependiendo de la complejidad del sitio o
de las acciones, puede suponer una reducción importante en el rendimiento.
Método clásico
Una forma de evitar ese coste es simplemente cacheando el objeto y luego operar
directamente sobre su referencia, evitando así que jQuery tenga que buscarlo cada vez
que lo necesitemos:
var $myObj = $('#myObjId');
$myObj.click( function(){
if ( $myObj.hasClass('clicked') ){
$myObj.removeClass('clicked');
$myObj.css('background-color', 'red');
} else {
$myObj.addClass('clicked');
$myObj.css('background-color', 'blue');
}
});
$myObjId.val('Click Me!');
Al asignar una variable al selector, ésta referencia directamente al objeto jQuery, por lo que
podemos operar sobre él con los métodos de la librería. Para recordar que se trata de un
objeto jQuery, una buena práctica es añadir la ‘$’ delante del nombre de la variable.
Método mejorado
Todavía podemos mejorar el código anterior mediante el encadenado (chaining) de
acciones sobre un mismo objeto:
var $myObj = $('#myObjId');
$myObj.click(function(){
if ( $myObj.hasClass('clicked') ){
$myObj.removeClass('clicked').css('background-color', 'red');
} else {
$myObj.addClass('clicked').css('background-color', 'blue');
}
});
$myObjId.val('Click Me!');
De este modo, si tenemos que actuar sobre un mismo objeto con varias acciones
consecutivas, no tendremos que recorrer el DOM una y otra vez ganando rendimiento.
Cacheando el objeto en funciones anónimas
Cuando aplicamos un callback a un evento, podemos cachear el objeto que lo recibe
mendiante el comando this:
var $myObj = $('#myObjId');
$myObj.click( function(){
var $this = $(this);
if ( $this.hasClass('clicked') ){
$this.removeClass('clicked').css('background-color', 'red');
} else {
$this.addClass('clicked').css('background-color', 'blue');
}
} );
$myObjId.val('Click Me!');
De esta forma, no es necesario volver a buscar el objeto en el DOM con lo que de nuevo
ahorramos recursos. De nuevo, para recordar que se trata de un objeto jQuery, es
interesante utilizar un prefijo como ‘$‘.
Método Experto
Finalmente, es importante conocer el comportamiento interno de jQuery para optimizar al
máximo nuestros selectores: cuando aplicamos una acción sobre un selector, jQuery nos
devuelve de forma interna el propio objeto. Esto permite refactorizar el código anterior y
mejorarlo:
var $myObj = $('#myObjId').click(function(){
var $this = $(this);
if ( $this.hasClass('clicked') ){
$this.removeClass('clicked').css('background-color', 'red');
} else {
$this.addClass('clicked').css('background-color', 'blue');
}
}).val('Click Me!');
En este caso, hemos realizado las operaciones sobre la misma declaración de la
variable, seguros de que el objeto devuelto es siempre la referencia original. De este modo,
aún conservamos la referencia al objeto jQuery para usarlo más adelante en nuestro código.
Tutti es una aplicación web OpenSource que permite la ejecución de una consola Javascript
en varios computadores y navegadores diferentes al mismo tiempo.
Para ello, al iniciar sesión, la aplicación crea una sala (room) con una dirección URL fija a
la que pueden acceder otros usuarios sin importar sus plataformas. Una vez dentro de la
sala, como si se tratara de un chat, cada usuario puede escribir y ejecutar código Javascript
para comprobar cómo se comporta en cada uno de los equipos que están conectados en ese
momento.
Es realmente útil para hacer pruebas tanto de funcionalidad como de rendimiento a nuestros
scripts en un entorno multinavegador o para crear código de forma colaborativa cuando los
desarrolladores están separados físicamente.
Actualmente funciona correctamente en los siguientes navegadores:
Firefox 2.0, 3.6 y 4 beta
Chrome 8.0
Safari 5.0
Safari 4 Mobile para iPad e iPhone
Opera 10
Internet Explorer 6, 7, y 8
