Hoy por hoy la mayoría de los desarrolladores utilizamos JQuery como framework de capa de presentación que nos ayuda a simplificar y reducir las tareas que tenemos que realizar en entornos Web. Ahora bien también hay que recordar que el framework se centra en el manejo y manipulación de la capa de presentación (Arbol DOM). En este artículo vamos a hablar de Underscore.js que es un gran complemento para JQuery.
JQuery y Underscore
Cuando mas manejamos JQuery mas sencillo es darse cuenta que nos faltan algunas cosas fundamentales a nivel de Javascript .Quiza la mas importante es su capacidad para manipular datos . JQuery no dispone de funciones potentes para manejo de arrays y de estructuras JSON .¿Es esto un punto en su contra? .La realidad es justamente lo contrario . JQuery es un framework de presentación NO de negocio. Por lo tanto han decidido centrarse en una cosa y ser el mejor en ella . ¿Como podemos solventar nuestros problemas de manipulación de datos?. En este caso es relativamente sencillo , podemos utilizar la libreria Underscore.js (bajar de aqui) que esta centrada justamente en la gestión del negocio.
Vamos a ver un ejemplo en el que definimos una tabla y rellenamos la tabla utilizando una estructura JSON y Underscore.js
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery-1.10.2.min.js">
</script>
<script type="text/javascript" src="underscore.js">
</script>
<script type="text/javascript">
$(document).ready(function(evento) {
var listaPersonas= [{"nombre":"pedro","apellidos":"gonzalez","edad":20},
{"nombre":"maria","apellidos":"gomez","edad":30},
{"nombre":"david","apellidos":"sanchez","edad":40},];
//uso de underscore
_.each(listaPersonas,function(elemento) {
$("#tabla").append("<tr><td>"+elemento.nombre+"</td><td>"
+elemento.apellidos+
"</td><td>"+elemento.edad+"</td></tr>");
})
});
</script>
</head>
<body>
<table id="tabla">
</table>
</body>
</html>
Hemos usado el método each de underscore (_.each) para generar la tabla que se muestra a continuación:
Underscore y Filtrados
Supongamos que queremos añadir ahora una caja de texto con el campo nombre y un botón de filtrar. De tal forma que cuando introducimos un nombre y pulsamos se realice un filtrado por ese nombre .Si los datos JSON nos hubieran venido via AJAX podríamos hacer otra petición AJAX que nos filtre . Sin embargo todos podemos intuir que si ya tenemos los datos en el cliente deberiamos filtrar de forma directa y ahorrarnos peticiones . Esta operación la podemos realizar utilizando otro de los métodos de la librería underscore concretamente el método where .Vamos a ver como queda el código.
</pre>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-1.10.2.min.js">
</script>
<script type="text/javascript" src="underscore.js">
</script>
<script type="text/javascript">
$(document).ready(function(evento) {
var listaPersonas= [{"nombre":"pedro","apellidos":"gonzalez","edad":20},
{"nombre":"maria","apellidos":"gomez","edad":30},
{"nombre":"david","apellidos":"sanchez","edad":40},
];
_.each(listaPersonas,function(elemento) {
$("#tabla").append("<tr><td>"+elemento.nombre+"</td><td>"+
elemento.apellidos+"</td><td>"+elemento.edad+"</td></tr>");
})
$("#boton").click(function() {
$("#tabla tr").remove();
var listaFiltro=_.where(listaPersonas, {nombre:$("#nombre").val()});
_.each(listaFiltro,function(elemento) {
$("#tabla").append("<tr><td>"+
elemento.nombre+"</td><td>"+
elemento.apellidos+"</td><td>"+
elemento.edad+"</td></tr>");
})
});
});
</script>
</head>
<body>
<table id="tabla">
</table>
Filtrar :<input type="text" name="nombre" id="nombre"><input type="button" id="boton" value="aceptar" />
</body>
</html>
<pre>
El resultado de usar Underscore será el siguiente.
Hemos realizado un filtrado sin tener que recurrir a AJAX y manipulando unicamente el cliente.
Gran aporte Señor Cecilio Alvarez es una base para seguir investigando sobre este framework jquery, mi pregunta como lo utilizaria uno para realizar una consulta en una base de datos o en un archivo csv o txt
depende mucho de que tipo de base de datos .Local o remota .Si devuelve JSON o no 🙂 . Pero no será complicado ya que puedes hacer conversiones usando por ejemplo la funcion _.map() de underscore