jQuery / Ajax – Cargando datos desde json

Bienvenidos sean a este post, hoy continuaremos con la carga de datos externos.

En el post anterior vimos como cargar una pagina html desde jQuery, si bien esto no es una mala opcion tambien disponemos por una opcion mas estandarizada y difundida como es JavaScript Object Notation o JSON, dado que nos permite manipular mejor la informacion en la estructura del archivo y si bien con jQuery en la pagina html podemos hacer lo mismo a traves del selector con los archivos JSON podemos hacerlo de mejor forma y mas nativo con Javascript, antes de comenzar a trabajar con ello hablemos un poco sobre su sintaxis basica:

{
	"clave 1" : "valor",
	"clave 2" : [
		"valor 1",
		"valor 2",
		"valor N"
		]
}

Entre las llaves pondremos todos los valores necesarios y siempre comprenderan dos valores; el primero sera para la clave de identificacion y luego ira el valor asociado a este, esto podemos hacerlo de dos formas, como se ve en la primer clave, una clave y un valor, y sino como en el segundo caso donde podemos asociar un array de valores a una clave, para usaremos los corchetes ([]) para contener todos los valores necesarios en este, un dato a tener en cuenta es que tanto las claves como los valores siempre deben ir entre las comillas dobles, estos ultimos si son de tipo string, para empezar con esto volveremos a usar el codigo del post anterior, en caso de no tenerlo les dejo un link para descargarlo:

Solo deben extraer todos los archivos en un solo directorio y listo pero a diferencia de otros posts esto debe ser en un servidor web, esto es asi porque debido a restricciones de seguridad de los navegadores no permiten la ejecucion de las funciones que usaremos para cargar los datos externos, al final les dejare un link con soluciones para esto mientras tanto continuemos, nuestro primer paso sera crear un nuevo archivo con el nombre de e.json y le agregaremos el siguiente codigo:

e.json

[
	{
		"nombre": "Azathoth",
		"resumen": "Azathoth, El Necio Sultán de los Demonios, El que Roe, Gime y Babea en el Centro del Vacío Final. Es el caos creativo e infinito del universo y el supremo Dios Exterior. Una maldición ha hecho que sea un dios ciego y lobotomizado, que pasa la eternidad de su encarcelamiento moviéndose incesantemente al son de una flauta."
	},
	{
		"nombre": "Nyarlathotep",
		"resumen": "Nyarlathotep es un Dios Exterior. Se desconoce cuál es su forma original, pues adopta una apariencia u otra en función de sus propósitos aunque se especula que esta es una gran masa poliposa con una larga excreción roja."
	},
	{
		"nombre": "Shub-Niggurath",
		"resumen": "Shub-Niggurath, es una deidad de la fertilidad. Shub-Niggurath, a pesar de su importancia, jamás aparece físicamente, por lo que jamás se da una descripción de ella y hay gente que erróneamente asocia a ella la descripción de Abhoth."
	},
	{
		"nombre": "Yog-Sothoth",
		"resumen": "Yog-Sothoth es el dios más importante de Los Mitos de Cthulhu. Encarna la omnisciencia y es la contraparte de Azathoth, pues este se corresponde con la omnipotencia. Yog-Sothoth no es más que una masa amorfa de burbujas iridiscentes en continua creación y autodestrucción."
	}
]

Observen el formato del archivo que utilizamos, encerraremos todo entre dos corchetes y luego cada uno de los elementos ira entre llaves y separados por comas, dentro tendran la misma sintaxis que comentamos al comienzo, cada dato representara la informacion resumida de otros dioses creados por Lovecraft, este sera simplemente la informacion ahora debemos pasar a la verdadera magia y para ello abriremos el archivo codigo.js y le agregaremos el bloque de codigo:

$(document).ready(function() {
	$('#exteriores a').click(function(ev) {
		ev.preventDefault();
		$.getJSON("e.json", function(datos) {
			var html='';
			$.each(datos, function(indice, entrada) {
			html += '<div class="entrada">';
			html += '<h3 class="nombre">' + entrada.nombre + '</h3>';
			html += '<div class="resumen">';
			html += entrada.resumen;
			html += '</div>';
			html += '</div>';
			});
			$('#diccionario').html(html);
		});
	});
});

En este caso primero asociaremos el evento click al link del div identificado como exteriores, en la funcion pasaremos un argumento que sera el representante de nuestro evento, a este parametro le pasaremos la funcion preventDefault para desactivar la accion predeterminada del link, esto evitara que cargue la pagina, nuestro siguiente paso sera usar el metodo getJSON el cual sera el encargado de cargar nuestro archivo .json, si observan simplemente se lo pasamos al selector para que pueda trabajar sin necesidad de asociarlo a nada, volviendo a la funcion le pasaremos el archivo y luego usaremos una funcion anonima para obtener los datos (esto es automatico) y la informacion del mismo la asignara al argumento que usemos, despues definimos una variable llamada html sin contenido, lo siguiente sera usar la funcion each para poder procesar cada dato de datos (es decir cada una de las entradas), y en ella usaremos otra funcion anonima donde primero ira la clave o indice de cada dato, el siguiente sera el valor de cada clave, dentro del bloque de esta funcion armaremos algo similar a lo visto en la pagina de datos del post anterior donde primero estableceremos el div con la clase entrada seguido del div con la clase nombre y el valor de esa entrada, lo mismo para el siguiente llamada resumen y su respectivo valor.

Todo esto que hicimos lo almacenaremos en la variable html que definimos previamente y por ultimo sera seleccionar al div diccionario y por medio del metodo html completarlo con el valor almacenado en la variable html, con todo esto comentado veamos como funciona ahora mediante el siguiente video

Hasta aca tenemos dos formas distintas de como obtener datos sin muchos inconvenientes, tanto desde una pagina web como otra forma un poco mas estandarizada y difundida como es .json, aunque si lo probaron y no funciono es porque deben hacerlo desde un servidor web para ello les recomiendo crear una pc virtual e instalarle un debian, con solo 1 GB funciona mas que bien, para ello les dejo el siguiente post donde lo explico:

Una vez instalado les dejo este otro post donde explico como instalar un Apache, PHP y mariadb sin morir en el intento 😅

Los dos primeros son obligatorios, el segundo sera utilizado mas adelante y el ultimo no es necesario pero ya que estamos, no?, con esto comentado les dejo un enlace con todo los archivos trabajados en este post y los del proyecto para probarlo hasta ahora:

En resumen, hoy hemos visto como cargar datos desde un archivo json, una breve (brevisima) explicacion sobre este formato, porque es mas beneficioso que hacerlo desde una pagina web como vimos en el post anterior, por ultimo con el ejemplo hemos visto como trabaja asi como tambien unos posts para poder instalar un servidor web y poder trabajar con el, 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.