Leer archivos XML con JQuery

Desde que JQuery lleg贸 a nuestras vidas, Javascript se ha convertido en un camino de rosas 馃榾 Tanto es as铆 que en pocas l铆neas podemos conseguir el parseo completo de un archivo XML 隆Vamos a verlo!

En primer lugar hay que aclarar que podemos toparnos principalmente聽con聽tres formatos de XML diferentes:

  1. Utilizando atributos: Cada elemento guarda su informaci贸n dentro de atributos. Los atributos deber铆an utilizarse para informaci贸n predeterminada, metadatos, archivos grandes (los atributos tienden a ocupar menos bytes que los elementos).
    <?xml version="1.0" encoding="utf-8" ?>
    <Blogs>
    聽 <blog name="WebLog Expert - Powerful log analyzer"
    聽聽聽聽聽聽聽 description="Download and analyze Apache and IIS Web logs on your own PC."
    聽聽聽聽聽聽聽 url=" http://www.weblogexpert.com/"/>
    聽 <blog name="Professional drupal themes"
    聽聽聽聽聽聽聽 description="For professional drupal themes with a unique look and feel, visit TopNotchThemes.com."
    聽聽聽聽聽聽聽 url="http://www.topnotchthemes.com/"/>
    聽 <blog name="Paypal Developer Community"
    聽聽聽聽聽聽聽 description="The community for developping paypal payment processing scripts."
    聽聽聽聽聽聽聽 url="http://www.pdncommunity.com" />"
    </Blogs>
  2. Utilizando nodos/elementos: Los elementos聽contienen a su vez otros elementos llamados nodos. Se suelen utilizar para almacenar datos.
    <?xml version="1.0" encoding="utf-8" ?>
    <Blogs>
    聽 <blog>
    聽聽聽 <name>WebLog Expert - Powerful log analyzer</name>
    聽聽聽 <description>Download and analyze Apache and IIS Web logs on your own PC.</description>
    聽聽聽 <url>http://www.weblogexpert.com/</url>
    聽 </blog>
    聽 <blog>
    聽聽聽 <name>Professional drupal themes</name>
    聽聽聽 <description>For professional drupal themes with a unique look and feel, visit TopNotchThemes.com.</description>
    聽聽聽 <url>http://www.topnotchthemes.com/</url>
    聽 </blog>
    聽 <blog>
    聽聽聽 <name>Paypal Developer Community</name>
    聽聽聽 <description>The community for developping paypal payment processing scripts.</description>
    聽聽聽 <url>http://www.pdncommunity.com</url>
    聽 </blog>
    </Blogs>
  3. Mezcla de los dos anteriores.

Dependiendo del c贸mo est茅 almacenado utilizaremos un m茅todo u otro para recuperarlo.

Recuperaci贸n de atributos

//Read attributes

$.get("Attributes.xml", function (xml) {
聽聽聽 $(xml).find("blog").each(function () {

聽聽聽聽聽聽 var name = $(this).attr('name');
聽聽聽聽聽聽聽var description = $(this).attr('description');
聽聽聽聽聽聽聽var url = $(this).attr('url');

       alert(name + " " + description + " " + url);
聽聽聽 });
});

Recuperaci贸n de nodos/elementos


//Read nodes
聽 $.get("Nodes.xml", function (xml) {
聽聽聽 $(xml).find("blog").each(function () {
聽聽聽聽聽聽 var name = $(this).find('name').text();
聽聽聽聽聽聽 var description = $(this).find('description').text();
 聽聽聽聽聽 var url = $(this).find('url').text();

聽聽聽聽聽聽 alert(name + " " + description + " " + url);
聽聽聽 });
});

Lo que estamos haciendo en ambos casos es una iteraci贸n a trav茅s de each por cada elemento blog que聽tengamos en el archivo. Dependiendo del tipo que esperemos utilizaremos attr para recuperar los atributos y find para los elementos.

Espero que sea de utilidad 馃檪

隆Saludos!

27 Comments

  1. Pepe Marzo 22, 2011 at 5:04 pm

    ojonudo !

    Reply
    1. Gisela Marzo 23, 2011 at 7:12 pm

      隆Gracias Pepe! 馃榾

      隆Saludos!

      Reply
  2. elcharli Agosto 12, 2011 at 5:05 pm

    Saludos, he tratado de ejecutar tu codigo en mi portatil, con el navegador IE y con Firefox y nada, no funciona ni con uno ni con otro, a que puede ser debido?

    Reply
    1. Gisela Agosto 14, 2011 at 1:21 pm

      Hola elcharli,

      驴Te da alg煤n error de javascript al intentar probarlo?

      隆Saludos!

      Reply
      1. Lenin Junio 15, 2013 at 7:08 pm

        quisiera recorrer los atributos del elemento se puede

        Reply
  3. Deimak Febrero 8, 2012 at 3:32 pm

    Muy buen post, es muy claro sencillo y facil de comprender. Muchas Gracias …. wenisimo

    Reply
    1. Gisela Febrero 12, 2012 at 12:39 am

      Muchas gracias Deimak, me alegra que te haya sido de utilidad 馃榾

      隆Saludos!

      Reply
    1. Gisela Junio 28, 2012 at 8:54 pm

      Gracias por tu comentario Alexander, ya estoy solucionando el malware y en las pr贸ximas horas desaparecer谩 de la lista negra de google.

      Un saludo,

      Reply
  4. Christian Septiembre 11, 2012 at 4:10 pm

    UNA EXPLICACION MUY MUY BUENA EN CUANTO A LEER UN ARCHIVO XML, EN ESPECIAL LA PARTE DONDE EXPLICAS LOS DISTINTOS TIPOS DE XML, EXISTEN MUCHOS TUTORIALES EN LA WEB SOBRE LEER XML PERO NINGUNO EXPLICA LOS TIPOS DE XML Y MAS IMPORTANTE AUN, NO HABLAN DE KE EL ACCESO DEPENDE DEL TIPO DE XML, GRACIAS.

    Reply
  5. Isidro Septiembre 19, 2012 at 12:51 am

    Hola!! Soy novato en esto de construccion Web, pero una de las cosas que mas me llaman es la lectura de ficheros XML. Ahora me podrias decir como lo coloco en un archivo html?

    Gracias por adelantado

    Reply
    1. Gisela Octubre 28, 2012 at 9:08 am

      Hola Isidro, disculpa la tardanza 馃檨

      驴Has creado el archivo Atributes.xml en el ra铆z con el XML para poder recuperarlo desde el c贸digo? 驴Referenciaste JQuery ANTES de insertar este fragmento del ejemplo? 驴Te da alg煤n tipo de error?

      隆Saludos!

      Reply
  6. felix Octubre 25, 2012 at 10:52 pm

    Hola, muy buena explicaci贸n pero bueno cuando lo coloco en un html no corre y me intriga porque acaso debo de poner mi proyecto en un servidor apache como el xamp? por ejemplo? saludos

    Reply
    1. Gisela Octubre 28, 2012 at 9:10 am

      Hola felix,

      Muchas gracias por tu comentario.

      No, no ser铆a necesario ponerlo en un servidor web. Las 煤nicas consideraciones que hay que tener en cuenta son:

      1. Referenciar la librer铆a JQuery antes de insertar el c贸digo que presento en el post.
      2. Atributes.xml con el contenido de ejemplo debe estar en la ra铆z para que el c贸digo JavaScript lo encuentre 馃檪

      驴Te da alg煤n error en particular?

      隆Saludos!

      Reply
  7. vicenrele Noviembre 2, 2012 at 12:51 am

    Buen art铆culo donde se diferencian los tipos de XML.
    Pero para probar el c贸digo jQuery hace falta servidor. Sin 茅l salta un error que dice que no encuentra el xml (y s铆, lo he puesto en la ra铆z y he referenciado bien jQuery).
    Me imagino que esto es porque ‘$.get’ al fin y al cabo es una petici贸n Ajax…

    Reply
  8. slipkvayne Diciembre 27, 2012 at 6:03 am

    Hola, tu c贸digo me ha servido de mucho, pero tengo una pregunta 驴c贸mo le hago para que el .each no se recorra todo el documento en busca del nodo blog si no que solo encontrando los primeros 5 nodos blog se rompa el recorrido? De antemano gracias y saludos

    Reply
    1. Gisela Diciembre 28, 2012 at 12:59 am

      Muchas gracias por tu comentario slipkvayne 馃檪

      En cuanto a lo que preguntas, podr铆as controlar cu谩ntos nodos se van localizando con un contador y, en el momento que consigas los que necesitas, hacer un return false; para que salga del .each.

      Espero que te haya resuelto la duda.

      隆Saludos!

      Reply
  9. Miguel Enero 25, 2013 at 6:41 pm

    Buen dia… gracias por el aporte muy bueno… solo tengo una duda, estoy intentando cargar el XML cuando le das click a algo, Carga diferentes NodosPadre con diferentes clicks por eso queria poner solo 1 codigo de lectura de XML y mandarle el nombre del NodoPadre por funcion y que me regrese el dato. pero no logro ponero en la funcion. pero no he podido ponerlo en funcion por que parece que ya es una funcion que se ejecuta automaticamente y cuando intento usar la informacion no me deja por que aun no esta cargada la informacion del XML… intenten darle un return a mi funcion pero aun asi no me regresa nada. te pongo mi linea por si puedes darme una orientacion gracias de antemano

    $.fn.ReadXml = (function($XmlVar){
    $Vn_i = 0;
    $Varray_XmlFile = [];
    $.get(“sucursales.xml”, function (xml) {
    $(xml).find($XmlVar).find(“CIUDAD”).each(function () {
    $Vn_i = $Vn_i + 1;
    $Varray_City[$Vn_i] = $(this).find(‘SUCURSAL’).text();
    });
    });return $Varray_City[];
    });

    $(“.MapNav”).click(function(){
    $Varray_Ciudad = $(“#function”).ReadXml(“BC”)
    });

    Reply
  10. Marti Bravo Marzo 3, 2013 at 5:14 pm

    Hola Gisela!
    Hace dos meses tambien me ayudaste a actualizar a WP7.8
    Gracias por tu post.
    Lo necesitaba urgentemente y gracias a ti ya tengo lista una aplicaci贸n.
    Thanks! 馃槈

    Reply
  11. Yasuarinha Junio 26, 2013 at 4:11 pm

    Excelente post! Soy nueva trabajando con JQuery y un ejemplo m谩s sencillo y claro que este, no hab铆a podido encontrar. Mil gracias!

    Reply
  12. german qui帽onez Diciembre 23, 2013 at 8:56 pm

    hola Gisela, poseo problemas, estoy usando tu c贸digo y en ie y chrome me sale el siguiente error:
    XMLHttpRequest cannot load file://disco%20mac/…/contenidos.xml. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘null’ is therefore not allowed access.

    nota en safari me funciona bien
    te agradecer铆a cualquier sugerencia

    bye

    Reply
    1. Gisela Diciembre 23, 2013 at 9:45 pm

      Hola german,

      El motivo de ese error es porque se est谩 intentando acceder a un recurso que est谩 en otro dominio, diferente a donde se est谩 sirviendo la aplicaci贸n, a trav茅s de JavaScript. Lo que te indica el navegador es que no se est谩 especificando en la cabecera de la petici贸n el permiso necesario para acceder. Puedes leer m谩s informaci贸n al respecto en este otro art铆culo. Prueba a ubicar el archivo en el mismo sitio en el que se est谩 ejecutando la aplicaci贸n (y mismo puerto). No deber铆as de tener poblemas.

      隆Saludos!

      Reply
  13. danielhp85 Marzo 24, 2014 at 7:40 pm

    Hola me gusta lo que has hecho, pero quisiera saber como lo implemento en el html. por favor ay煤dame con ese dato.
    Saludos

    Reply
    1. Gisela Torres Marzo 28, 2014 at 9:58 am

      Hola Daniel,

      No s茅 a qu茅 te refieres exactamente… 驴A representarlo quiz谩s?

      Saludos

      Reply
  14. Mauricio Enero 15, 2015 at 7:00 pm

    Quiero Consumirlo Dinamicamente, Quiero saber cuales nodos pertenecen a un nodo padre, pero dinamico sin tenerle que decir con el .find() cual es el padre y asi sucesivamente

    Reply
  15. Erick Angeles Abril 21, 2015 at 10:40 pm

    Hola Gisela.

    sabes si con jquery es posible leer un CFDI y retornar los valores a HTML

    Reply

Deja tu comentario

Tu direcci贸n de correo electr贸nico no ser谩 publicada. Los campos obligatorios est谩n marcados con *

Este sitio usa Akismet para reducir el spam. Aprende c贸mo se procesan los datos de tus comentarios.