Leer archivos XML con JQuery

por

Desde que JQuery llegó a nuestras vidas, Javascript se ha convertido en un camino de rosas :D 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!

19 thoughts on “Leer archivos XML con JQuery”

  1. Pingback Tweets that mention Leer archivos XML con JQuery | Return(GiS); -- Topsy.com

    • 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,

      Responder ↓

  6. 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.

    Responder ↓

  7. 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

    Responder ↓

    • 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!

      Responder ↓

  8. 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

    Responder ↓

    • 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!

      Responder ↓

  9. 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…

    Responder ↓

  10. 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

    Responder ↓

    • 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!

      Responder ↓

  11. 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”)
    });

    Responder ↓

  12. 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! ;)

    Responder ↓

Leave a Reply