icono_twiter icono Facebook
Carlos García Pérez

Técnico especialista en informática de empresa (CEU).

Ingeniero Técnico en Informática de Sistemas (UPM)

Creador de MobileTest, Haaala!, Girillo, toi18n.

Charla sobre desarrollo de aplicaciones en Android.

Ver todos los tutoriales del autor

Fecha de publicación del tutorial: 2011-08-18

Tutorial visitado 20.380 veces Descargar en PDF
Construcción personalizada de objetos JSON en cliente (JavaScript)

Construcción personalizada de objetos JSON en el cliente (JavaScript)

Introducción

JSON es un formato de intercambio de datos que por su ligereza se ha convertido en un estándar alternativo a XML. (Introducción a JSON)

A modo informativo comentar que se puede usar XPATH y XSLT sobre JSON, busca un poco si te interesa el tema.

En este tutorial voy a explicar como construir manualmente objetos JSON en JavaScript para que la serialización de un formulario (o de lo que sea) se adapte a vuestras necesidades y que la serialización sea más correcta semánticamente.

Además usando esta serialización personalizada, podremos utilizar de manera más directa librerías como Jackson así como las anotaciones @ResponseBody y @RequestBody de Spring MVC para deserializar automáticamente a objetos JAVA en la parte servidora los datos enviados en formato JSON desde el cliente.

Se comprende mejor con un ejemplo:

Ejemplo

Imagina que queremos recoger mediante un formulario HTML los productos (N) que hay en un determinado pedido (1):

Dicho formulario podría ser el siguiente (le he dado unos valores iniciales a cada uno de los campos, haz clic en cada uno de los botones):

El código HTML es: (Haz clic aquí para ampliar)

Captura de HTML del formulario

Si quisieramos modelizar ese negocio en lenguaje JAVA, las clases resultantes serían algo como (observe que un pedido tiene una lista de productos):

Ahora haz clic en cada uno de los botones del formulario HTML, de izquierda a derecha tendríamos:

Con serialize()

Simplemente ejecutamos en javascript (uso jquery para escribir menos) $("#pedidoForm").serialize() para serializar el formulario de la manera tradicional, es decir no es JSON sino la queryString de los parámetros.

pedidoCodigo=CPE1&pedidoDescripcion=Descripci%C3%B3n+Pedido&productoCodigo=CP1&productoUnidades=4&productoCodigo=CP2&productoUnidades=4

Con serializeObject()

Ejecutamos en JavaScript (uso jQuery y JSON) JSON.stringify($("#pedidoForm").serializeObject())

  • JSON.stringify() » Es una función de la librería JSON que convierte a string un objeto JSON.
  • $("#pedidoForm").serializeObject() » Es una función de la librería JSON que construye un JSON con los datos de un formulario.

Si observas bien, semánticamente es mejorable, pues genera un JSON:

{"pedidoCodigo":"CPE1","pedidoDescripcion":"Descripción Pedido",
"productoCodigo":["CP1","CP2"],"productoUnidades":["4","4"]}

Es más correcto semánticamente:

{"codigo":"CPE1","descripcion":"Descripción Pedido",
"productos":[{"codigo":"CP1","unidades":"4"},{"codigo":"CP2","unidades":"4"}]}

Además usando esta segunda serialización, podremos usar de manera más directa librerías como Jackson así como las anotaciones @ResponseBody y @RequestBody de Spring MVC para deserializar automáticamente a objetos JAVA en la parte servidora

¿Cómo construyo ese JSON?

Construcción del JSON personalizado

Para crear el JSON vamos a crear objetos JavaScript con sus atributos y métodos. Posteriormente lo serializaremos a JSON con las funciones estándar de JavaScript.

Y para crear el JSON personalizado usamos un poco de JQuery para escribir menos:

Si lo que deseas además es modificar la vista con los datos devuelvos por el servidor en una petición ejecutada via Ajax, puedes hacer cosas como:

Conclusiones

Conocer bien todas las tecnologías disponibles y saber en que tipo de proyectos en encajan es extremadamente importante, pues de esa decisión y conocimientos depende el éxito del desarrollo.

Usando arquitecturas ligeras como la expuesta en este artículo, puede hacer un tiempo de desarrollo algo más elevado respecto a otras tecnologías (JSF con primefaces por ejemplo) pero desde luego el sistema es bastante escalable debido al bajo uso de CPU del servidor y el aprovechamiento de los recursos del cliente.

Espero os haya parecido interesante, un saludo.
Carlos García.

A continuación puedes evaluarlo:

Regístrate para evaluarlo

Por favor, vota +1 o compártelo si te pareció interesante

Share |
Anímate y coméntanos lo que pienses sobre este TUTORIAL:

Fecha publicación: 2014-04-29-14:41:52

Autor: mauri

Excelente ejemplo! se pueden descargar los archivos desde algun link.

Fecha publicación: 2013-05-17-18:42:20

Autor: carlosgp

Buena observación :-)

Efectivamente "item" es para cada vuelta del bucle exactamente lo mismo que "prodCodigos[pos]", por lo que podríamos sustituirlo y quedaría un código un poco más pequeño.

Saludos

Fecha publicación: 2013-05-17-18:39:20

Autor: drkmarvin

en el código
"jQuery.each(prodCodigos, function(pos, item){
pedidoObj.addProducto(new Producto(prodCodigos[pos].value, prodUnidades[pos].value));
}); "
Cual es la funcion de "item"?????