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.