Tip: Obtener datos desde un XML con jQuery

Cargar datos con jQuery es una tarea sencilla que pesa básicamente sobre la función $.get, aquí un pequeño ejemplo de como implementarlo con XML y unas pocas lineas de código.

Observa el Script

Primero que nada, échale un ojo al siguiente XML, básicamente contiene información de algunos libros, con su titulo, descripción y una imagen de portada. Podés copiarlo y guardarlo como data.xml.

info goes here.





info goes here.





info goes here.

Y ahora el script en jQuery que hace el trabajo:

$(function() {
$.get('data.xml', function(d){
$('body').append('
Recommended Web Development Books


');

$(d).find('book').each(function(){
var book = $(this);

$('dl')
.append('
' + book.attr('title') + '



')
.find('dd')
.append('')
.append('
' + book.attr('title') + '

')
.append('

' + book.find('description').text() + '

');
});
});
});

Ahora, desciframos el script

Cuando el documento queda listo para ser manipulado, obtenemos el XML usando la función $.get. Luego, en el paréntesis pasamos la ubicación del archivo y luego ejecutamos un callback cuando termine de cargarlo. En este caso usamos la variable “d” para representar la información que fue traida desde el XML. Despues creamos un titulo y una lista de definiciones.

Luego, buscamos dentro del XML y encontramos la etiqueta titulada “book”. Volviendo al XML, hay tres libros, entonces necesitaremos usar el método “each” para correr la operacion en cada uno. Recordá que “each” es lo mismo que “for“… simplemente un bucle que nos permite revisar cada uno de los elementos de un grupo de datos como este.

En el siguiente bloque, llenamos la lista de definiciones con la información de cada uno de los items que obtuvimos como respuesta y Con el fin de obtener el “title“, la “description” y el “imageurl” desde el XML, usamos “book.attr(valor)” – donde “valor” es equivalente a la info contenida en la etiqueta.

Eso es todo

Cabe señalar que al script le falta un poco más de trabajo para usarse en aplicaciones grandes pero como punto de partida es bueno.

Dudas… sugerencias.. lo que sea… aqui abajito está la caja de comentarios… usála.