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!