jQuery / Ordenando con JSON

Bienvenidos sean a este post, hoy veremos la tercer variante de orden.

En los posts anteriores hemos visto varias formas que se pueden presentar la informacion y sus distintas formas para ordenarlas pero vamos a ver un ejemplo un poco mas cercano a la realidad, ya que en lugar de tener informacion fija en nuestra pagina la aplicaremos mediante un archivo de tipo JSON, para ello utilizaremos el codigo que vimos en el post anterior, en caso de no tenerlo les dejo un link para descargarlo:

Solamente deben extraer todos los archivos en un directorio, con esto realizado nuestro primer paso sera agregar un nuevo archivo con el nombre de libros.json y le agregaremos el siguiente codigo:

libros.json

[
	{"img":"pic07.webp","titulo":"SDL Game Development","autor":[{"nombre":"Shaun","apellido":"Mitchell"}],"publicado":"Junio 2013","precio":28.99,"fecha":"2013-06"},{"img":"pic02.webp","titulo":"node.js development","autor":[{"nombre":"David","apellido":"Herron"}],"publicado":"Julio 2020","precio":29.99,"fecha":"2020-07"},{"img":"pic04.webp","titulo":"Mastering JavaScript Functional Programming","autor":[{"nombre":"Federico","apellido":"Kereki"}],"publicado":"Noviembre 2017","precio":39.99,"fecha":"2017-11"},{"img":"pic05.webp","titulo":"Mastering Kotlin","autor":[{"nombre":"Nate","apellido":"Ebel"}],"publicado":"Octubre 2019","precio":0.00,"fecha":"2019-10"}
]

Este sera nuestro archivo con todos los datos que usaremos en nuestra tabla, en este caso repetimos algunos pero agregamos unos nuevos, pero como dijimos son solamente los datos, nuestro siguiente paso sera trabajar con el archivo codigo.js para ello eliminaremos o comentaremos el codigo anterior y agregaremos el siguiente codigo:

function construirLinea(linea) {
	var autor = [];
	$.each(linea.autor, function(indice, aut) {
		autor[indice]=aut.nombre + " " + aut.apellido;
	});

	var html = '<tr>';
	html += '<td><img src="img/' + linea.img + '"></td>';
	html += '<td>' + linea.titulo + '</td>';
	html += '<td>' + linea.autor + '</td>';
	html += '<td>' + linea.publicado + '</td>';
	html += '<td>' + linea.precio + '</td>';
	html += '</tr>';

	return html;
}

function construirLineas(lineas) {
	var todas = $.map(lineas, construirLinea);
	return todas.join('');
}

Estas dos funciones son para construir las lineas en la tabla, la primera sera para construir linea por linea, en este caso primero definiremos un objeto donde almacenaremos los datos del nombre y apellido del autor, despues definiremos un objeto donde le pasaremos el codigo HTML de cada linea y en ella almacenaremos el valor de cada atributo que pasaremos como argumento, y por ultimo lo devolveremos, la siguiente funcion es la encargada de juntar todas las lineas creadas, para ello primero definiremos un objeto donde mediante la funcion map pasaremos por todos los elementos y mediante la funcion anterior las iremos construyendo, para luego devolverlo pero le aplicaremos el metodo join para tomar el map generado anteriormente y unirlo en un texto, con esto ya podriamos mostrarlo pero nos falta un codigo para ello y para esto debemos agregar el siguiente bloque de codigo:

$.getJSON('libros.json', function(json) {
	$(document).ready(function() {
		var $tabla1 = $('#t-1');
		$tabla1.find('tbody').html(construirLineas(json));
	});
});

En este caso abriremos primero el archivo JSON por medio de getJSON y pasaremos la informacion a json, cuando el documento este listo definiremos un objeto para asignarle el id de nuestra tabla, despues mediante este buscaremos al tbody y en el cargaremos lo que nos devuelva construirLineas y la informaccion del archivo, si lo cargan en este momento se vera de la siguiente forma

Nuestro siguiente paso sera volver a agregar la capacidad de orden, para ello agregaremos una nueva funcion despues de las dos anteriores:

function prepLineas(lineas) {
	$.each(lineas, function(i, linea) {
		lineas[i].tituloFormateado = linea.titulo;
		lineas[i].titulo = linea.titulo.toUpperCase();
		$.each(linea.autor, function(j, aut) {
		  lineas[i].autorFormateado=aut.nombre + ' ' + aut.apellido;
		  lineas[i].autor=aut.apellido + ' ' + aut.nombre;
		  lineas[i].autor=lineas[i].autor.toUpperCase();
		});
	});
	return lineas;
}

Esta funcion sera para preparar los datos de autor y titulo, en este caso estableceremos uno para mostrar (el identificado como formateado) y el otro sera para ordenarlo, por eso usamos a toUpperCase, observan que tecnicamente lo que hacemos es establecer los nuevos valores para el objeto recibido como argumento, una vez ingresados al final devolveremos el objeto con los nuevos datos, nuestro siguiente paso sera modificar la funcion construirLinea de la siguiente manera:

function construirLinea(linea) {
	var html = '<tr>';
	html += '<td><img src="img/' + linea.img + '"></td>';
	html += '<td>' + linea.tituloFormateado + '</td>';
	html += '<td>' + linea.autorFormateado + '</td>';
	html += '<td>' + linea.publicado + '</td>';
	html += '<td>' + linea.precio + '</td>';
	html += '</tr>';

	return html;
}

En este caso eliminamos el each que se encargaba de crear el autor y ahora usaremos los campos de titulo y autor formateado que creamos en la funcion prepLineas, despues sigue haciendo exactamente lo mismo, nuestro siguiente paso sera modificar el bloque donde cargamos y manejamos el JSON de la siguiente manera:

$.getJSON('libros.json', function(json) {
	$(document).ready(function() {
		var $tabla1 = $('#t-1');
		var lineas=prepLineas(json)
		$tabla1.find('tbody').html(construirLineas(lineas));
	});
});

Aqui la modificacion es leve, agregamos un nuevo objeto que obtendra el valor devuelto por prepLineas, pasamos el json como argumento, con nuestra informacion procesada lo siguiente sera buscar el tbody de la tabla y por medio de construirLineas y el objeto anteriormente creado tendremos nuestra pagina cargada y presta para ordenarla pero para elllo debemos modificar este ultimo bloque de la siguiente manera:

$.getJSON('libros.json', function(json) {
	$(document).ready(function() {
		var $tabla1 = $('#t-1');
		var lineas=prepLineas(json)
		$tabla1.find('tbody').html(construirLineas(lineas));
		var $headers = $tabla1.find('thead th').slice(1);
		$headers
			.wrapInner('<a href="#"></a>')
			.addClass('orden');

		$headers.on('click', function(ev) {

		ev.preventDefault();
		var $header = $(this),
			claveOrd = $header.data('orden').key,
			direcOrden = 1;
		if ($header.hasClass('orden-asc')) {
			direcOrden = -1;
		}

		lineas.sort(function(a, b) {
			var keyA = a[claveOrd];
			var keyB = b[claveOrd];
			if (keyA < keyB) return -direcOrden;
			if (keyA > keyB) return direcOrden;
			return 0;
		});

		$headers.removeClass('orden-asc orden-desc');
		$header.addClass(direcOrden == 1 ? 'orden-asc' : 'orden-desc');
		$tabla1.children('tbody').html(construirLineas(lineas));
		});
	});
});

Estas modificaciones nos permitiran ordenar los datos en todas las posibilidades, es muy similar a lo visto en el post anterior, primero tomaremos todos los th y a estos les aplicaremos un link y la clase, lo siguiente sera asociar al evento click a este objeto, volvemos a definir dos objetos y una variable, el primer objeto es para el elemento seleccionado, el siguiente es para obtener como debemos ordenarlo y la variable sera para indicar como sera la direccion del orden, el condicional chequea si tiene esa clase y establece un valor para direcOrden, despues ordenaremos el valor almacenado en lineas, aqui solamente aplicaremos el valor de claveOrd para los dos argumentos, esto establecera los valores de las variables para la comparaccion y saber si esta antes o despues uno de otro, por ultimo removemos todas las clases de orden y en base al operador de condicion y el valor de direcOrden estableceremos una clase u otra, para finalmente a traves del metodo html estableceremos el nuevo orden en lineas, esto gracias a construirLineas, con todo esto comentado solo nos resta ver como funciona mediante el siguiente video

Como pueden ver funciona de la misma forma pero para un caso un poco mas real dado que los datos los sacamos de un archivo JSON, pero si llegaron hasta aca y no les funciono es debido al metodo html porque este utiliza Ajax y por lo tanto necesitaran un servidor web, en caso de no tenerlo les paso dos posts:

En este les comento como crear un pc virtual y como instalarle un linux debian, en el siguiente post

En este les comento como instalar un Apache para un servidor debian, de forma opcional pueden instalar PHP y mariadb pero en este caso no son necesarios, se los reccomiendo de esta forma porque solo necesitan asignarle 1 GB de RAM y un poco de espacio en el disco, y cuando no lo necesiten mas solamente lo borran y listo, antes de finalizar les dejo el archivo con los codigos finales trabajados en este post:

En resumen, hoy hemos visto la tercer variante para ordenar informacion, en este caso sobre un archivo de tipo JSON, hemos pasado de lo mas basico como fue su carga y aplicacion a nuestra pagina, y como de una manera simple tambien se puede ordenar, espero les haya sido de utilidad sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.