Cuando trabajamos con aplicaciones web en muchos casos nos tenemos que traer estructuras en formato JSON del servidor para después procesarlas y mostrarlas en la pagina como estructura HTML.
Una vez tenemos los datos en formato JSON deberemos realizar un procesamiento para poderlos añadir a la pagina HTML . En muchos casos este procesamiento se realiza con JQuery y se genera una estructura DOM.
Esta estructura será añadida a la página como un nuevo contenido.
Vamos a ver a continuación en código como utilizando JQuery podemos transformar los datos que nos llegan del servidor que en este caso será una lista de personas como la siguiente.
{“personas”:[{“nombre”:”pedro”,”apellidos”:”perez”},{“nombre”:”maria”,”apellidos”:”sanchez”}]}
Para recepcionar los datos usamos JQuery y su método $.getJSON.
$(document).ready(function() { $.getJSON("RecursoJSON",function(datos) { $lista=$(""); $.each( datos.personas, function( clave, valor ) { $lista.append("<ul> <li>" + valor.nombre +"," + valor.apellidos+ "</li> </ul>"); }); $lista.appendTo("body"); }); });
El código es sencillo de entender simplemente realiza la petición JSON obtiene la lista de personas y con JQuery los convierte en una estructura ul li que añade a la página
Sin embargo tenemos algunos problemas que solventar . En primer lugar estamos construyendo continuamente nodos DOM y añadiendolos a una estructura.
Esta es una de las operaciones mas lentas a la hora de trabajar con DOM y el rendimiento empeorará. Para solventar nuestro problema debemos modificar el código de la forma siguiente.
$(document).ready(function() { $.getJSON("RecursoJSON",function(datos) { $lista=$(""); var cadena=""; $.each( datos.personas, function( clave, valor ) { cadena+="<ul> <li>" + valor.nombre +"," + valor.apellidos+ "</li> </ul>"; }); $(cadena).appendTo($lista); $lista.appendTo("body"); }); });
En un ejemplo tan pequeño como el que tenemos no notaremos mucha diferencia pero cuando estemos ante bloques de código complejos la diferencia será clara .Ahora bien todavía nos queda un problema a resolver y es el problema del esfuerzo de programación. Si revisamos nuestro código nos daremos cuanta que lo que mas tiempo nos llevará sera construir la estructura DOM que queremos añadir a la página a partir de los datos JSON que nos llegan.
HandleBars Templates
Este problema puede ser solventado a traves del uso de un motor de plantillas que nos permite definir una plantilla ,definir los datos en formato JSON y luego procesarlos de forma automatica y generar la estructura DOM que necesitamos.
Vamos a verlo construido en código para ello el primer paso será acceder a la página web del motor de plantillas e instalarlo. En este caso he elegido handlebarsjs
Para instalarlo simplemente nos bajaremos el fichero y añadimos el script en nuestra página.
<script type="text/javascript" src="handlebars-v1.1.2.js"></script>
Una vez hecho esto el siguiente paso es definir un bloque de código con el contenido de la plantilla
<script id="plantillaLista" type="text/x-handlebars-template"> <ul> {{#each personas}} <li> {{nombre}} {{apellidos}}</li> {{/each}}</ul> </script>
La plantilla simplifica de forma clara la forma de trabajar con los datos que nos vuelven en formato JSON.Para ello debemos realizar una serie de modificaciones en nuestro código de Javascript.
$(document).ready(function() { $.getJSON("RecursoJSON",function(datos) { var fuente = $("#plantillaLista").html(); plantilla = Handlebars.compile(fuente); var html = plantilla(datos); $("body").append(html); }); });
Los pasos son los siguientes :
- leo el contenido de la plantilla (fuente)
- Compilo el html fuente y devuelvo una plantilla
- Paso la información de JSON a la plantilla y genero un nuevo HTML
- Añado al arbol DOM el contenido HTML
La siguiente imagen muestra a nivel conceptual los diferentes pasos :
De esta forma las plantillas nos ayudan a reducir el código a construir.
[…] artículos relacionados: JSON , jQuery y templates , El universo de las […]
Buen aporte, tengo una pregunta ¿ hay alguna manera de mover los templates a otro archivo? es decir tener un archivo que se llame templates.html y desde ahi mandarlos a llamar?
Si no tendrias ningun problema podrias invocarlos via ajax y que estuvieran en una carpeta en el servidor pidiendolos según necesidades
Excelente, te felicito por la información que entregas, siempre actualizado a lo que esta sucediendo, lejos el mejor blog referente a java, Felicitaciones. 🙂
Excelente aporte, en verdad esta forma me ayudara bastante en el procesamiento de estructuras JSON del lado del Frontend… Te agradezco por este blog se nota el gran entendimiento y profesionalismo de los temas que compartes, sin lugar a dudas es uno de los mejores blogs sobre el desarrollo de software en Java y demas que he encontrado en habla hispana.
P.D Lo recomendare con amigos y compañeros
gracias . Me alegro que te haya sido util el articulo 🙂