Cómo analizar y mostrar XML con JavaScript

Hoy vamos a ver cómo trabajar con XML en JavaScript. Si XML te suena a algo incomprensible, ¡no te preocupes! Lo analizaremos todo con mucho detalle y también añadiremos más ejemplos para que todo sea lo más claro posible.

XML (junto con HTML) es uno de los formatos para almacenar datos, se ven similares a HTML. Veamos cómo analizarlos y mostrarlos usando JavaScript.

¿Qué es XML?

XML (eXtensible Markup Language) es un formato de texto para almacenar y transmitir datos. Se ve así:

<люди>
  <человек>
    <имя>Иван</имя>
    <возраст>25</возраст>
  </человек>
  <человек>
    <имя>Мария</имя>
    <возраст>30</возраст>
  </человек>
</люди>

Aquí tenemos "personas", que contienen varias "personas" con su "nombre" y "edad". Es como una tabla en forma de texto.

Ahora, aprendamos a descomponer este XML con JavaScript.

¿Cómo analizar XML con JavaScript?

Hay varios pasos que te ayudarán a trabajar con XML:

1. Obtener datos XML: los datos se pueden tomar del servidor o simplemente almacenar como una cadena en JavaScript.

2. Convertirlos en un objeto: para trabajar con XML, necesitamos convertirlo en un objeto con el que JavaScript pueda trabajar.

3. Extraer datos: después de eso, puedes extraer valores específicos.

Empecemos con el ejemplo más simple.

Ejemplo 1: Análisis de una cadena XML simple

Supongamos que tenemos una cadena con XML:

const xmlString = `
  <person>
    <person>
      <name>Ivan</name>
      <age>25</age>
    </person>
    <person>
      <name>Maria</name>
      <age>30</age>
    </person>
  </people>`;

Ahora tenemos que convertirla en un objeto. JavaScript tiene un objeto incorporado para esto DOMParser.

const parser = new DOMParser();
const xmlDoc = parser.parseFromString(xmlString, "text/xml");

Ahora xmlDoc es un objeto con el que se puede trabajar.

Extracción de datos de XML

Para extraer datos, necesitamos tratar los nodos XML como elementos HTML. Usamos el método getElementsByTagName():

const people = xmlDoc.getElementsByTagName("people");

for (let i = 0; i < people.length; i++) {
  const name = people[i].getElementsByTagName("name")[0].textContent;
  const age = people[i].getElementsByTagName("age")[0].textContent;
  console.log(`Name: ${name}, Age: ${age}`);
}

Aquí pasamos por cada "persona" y obtenemos su "nombre" y "edad". Como resultado, la consola mostrará:

Имя: Иван, Возраст: 25
Имя: Мария, Возраст: 30

Ejemplo 2: Análisis de XML de un documento HTML

A veces, XML puede ser parte de una página web y necesitamos analizarlo desde allí. Imaginemos que en nuestro HTML hay un elemento así:

<div id="xml">
  <люди>
    <человек>
      <имя>Сергей</имя>
      <возраст>28</возраст>
    </человек>
    <человек>
      <имя>Ольга</имя>
      <возраст>34</возраст>
    </человек>
  </люди>
</div>

Para obtener este XML y analizarlo, podemos hacer lo siguiente:

const xmlStringFromHtml = document.getElementById("xml").innerHTML;
const parser = new DOMParser();
const xmlDoc = parser.parseFromString(xmlStringFromHtml, "text/xml");

const люди = xmlDoc.getElementsByTagName("people");

for (let i = 0; i < people.length; i++) {
  const name = people[i].getElementsByTagName("name")[0].textContent;
  const age = people[i].getElementsByTagName("age")[0].textContent;
  console.log(`Name: ${name}, Age: ${age}`);
}

Aquí primero tomamos el contenido HTML y luego lo usamos como XML.

Ejemplo 3: Gestión de errores

A veces, el XML puede ser incorrecto y debemos ser capaces de manejarlo. Por ejemplo, si la etiqueta no está cerrada, esto puede causar un error. Para procesarlo, puedes añadir una comprobación:

const invalidXmlString = `<person> <name>Ivan</name> <age>25</age></person>`; // Error: <personas> no cerrado

try {
  const xmlDoc = parser.parseFromString(invalidXmlString, "text/xml");
  const ошибка = xmlDoc.getElementsByTagName("parsererror");
  if (ошибка.length > 0) {
    console.error("XML error:", ошибка[0].textContent);
  } else {
    console.log("XML is correct");
  }
} catch (e) {
  console.error("Error parsing XML:", e);
}

Resultados

¡Eso es todo! Hemos aprendido:

1. Analizar cadenas XML en JavaScript.

2. Extraer datos de XML utilizando métodos similares a trabajar con HTML.

3. Procesar errores en XML.

XML es un formato bastante antiguo, pero todavía útil para el intercambio de datos. ¡Ahora ya sabes cómo trabajar con él usando JavaScript! 🎉

Si tienes alguna pregunta o quieres más ejemplos, escríbeme, ¡estaré encantado de ayudarte! 😊