Cargar el contenido de un archivo XML con Javascript en React

Tiempo de lectura: 4 minutos

Hoy vamos a aprender cómo podemos cargar un fichero XML dentro de nuestro proyecto React para mostrar los datos.

Lo primero que vamos a hacer es instalar la librería necesaria, en este caso usaremos xml2js

npm install xlsx

Una vez instalado vamos a crear el componente que se encargará de cargar nuestro fichero XML.

XMLLoader.js

// xmlLoader.js
import parseString from 'xml2js';

async function loadXMLFile(filePath) {
  try {
    const response = await fetch(filePath);
    const xmlText = await response.text();
    const xmlObject = await parseXML(xmlText);
    return xmlObject;
  } catch (error) {
    console.error('Error loading XML file:', error);
    throw error;
  }
}

function parseXML(xmlText) {
  return new Promise((resolve, reject) => {
    parseString(xmlText, (error, result) => {
      if (error) {
        reject(error);
      } else {
        resolve(result);
      }
    });
  });
}

export default loadXMLFile;

En TypeScript:

// xmlLoader.ts
import { parseString } from 'xml2js';

async function loadXMLFile(filePath: string): Promise<any> {
  try {
    const response = await fetch(filePath);
    const xmlText = await response.text();
    const xmlObject = await parseXML(xmlText);
    return xmlObject;
  } catch (error) {
    console.error('Error loading XML file:', error);
    throw error;
  }
}

function parseXML(xmlText: string): Promise<any> {
  return new Promise((resolve, reject) => {
    parseString(xmlText, (error, result) => {
      if (error) {
        reject(error);
      } else {
        resolve(result);
      }
    });
  });
}

export default loadXMLFile;

Explicación:

• loadXMLFile: Esta función utiliza fetch para obtener el contenido del archivo XML y luego llama a parseXML para analizar ese contenido y devolverlo como un objeto JavaScript.
• parseXML: Esta función utiliza la biblioteca xml2js para convertir el texto XML en un objeto JavaScript.

Y para utilizarlo haremos lo siguiente:

Por supuesto, dividiré el punto 3 en secciones más pequeñas y explicaré cada paso:

Importar las dependencias y el archivo xmlLoader

// TuComponente.tsx
import React, { useEffect, useState } from 'react';
import loadXMLFile from './xmlLoader';

Explicación:

• Importamos las dependencias necesarias (React, useEffect, useState) y la función loadXMLFile que creamos previamente.

Definir el componente y el estado:

function TuComponente() {
  // Estado para almacenar los datos XML después de la carga
  const [xmlData, setXmlData] = useState<any>(null);

Explicación:

• Creamos un componente funcional llamado TuComponente.
• Utilizamos el hook useState para definir un estado llamado xmlData, que almacenará los datos XML después de la carga. Inicialmente, se establece en null.

Usar el hook useEffect para cargar el XML al montar el componente:

  useEffect(() => {
    async function fetchData() {
      try {
        // Llamar a la función para cargar el archivo XML
        const result = await loadXMLFile('ruta/al/archivo.xml');
        setXmlData(result);
      } catch (error) {
        // Manejar errores, por ejemplo, mostrar un mensaje de error al usuario
        console.error('Error loading XML file:', error);
      }
    }

    // Llamar a la función de carga de datos al montar el componente
    fetchData();
  }, []); // El segundo argumento del useEffect asegura que solo se ejecute una vez al montar el componente

Explicación:

• Utilizamos el hook useEffect para realizar efectos secundarios en el componente, como cargar el archivo XML.
• Dentro de useEffect, definimos una función asíncrona llamada fetchData.
• fetchData llama a la función loadXMLFile para cargar el archivo XML y actualiza el estado con los datos obtenidos.
• Cualquier error durante la carga se maneja en el bloque catch.

Mostrar un mensaje de carga si los datos aún no se han cargado

  if (!xmlData) {
    return <div>Cargando...</div>;
  }

Explicación:

• Verificamos si los datos XML aún no se han cargado (xmlData es null).
• Si es así, mostramos un mensaje de carga. Esto evita que se renderice el resto del componente antes de que los datos estén listos.

Hacer algo con los datos XML (opcional):

  // Hacer algo con los datos XML, por ejemplo, imprimirlos en la consola
  console.log(xmlData);

  // Renderizar los datos XML en tu componente (puedes personalizar esto según tus necesidades)
  return (
    <div>
      {/* Renderizar los datos XML en tu componente */}
    </div>
  );
}

export default TuComponente;

Explicación:

• En este paso, mostramos los datos XML en la consola utilizando console.log(xmlData). Puedes realizar cualquier operación que necesites con los datos aquí.
• Luego, puedes personalizar la parte de retorno (return) para renderizar los datos XML en tu componente según tus necesidades específicas.

El código completo sería:

// TuComponente.tsx
import React, { useEffect, useState } from 'react';
import loadXMLFile from './xmlLoader';

function TuComponente() {
  // Estado para almacenar los datos XML después de la carga
  const [xmlData, setXmlData] = useState<any>(null);

  // Efecto para cargar el archivo XML al montar el componente
  useEffect(() => {
    async function fetchData() {
      try {
        // Llamar a la función para cargar el archivo XML
        const result = await loadXMLFile('ruta/al/archivo.xml');
        setXmlData(result);
      } catch (error) {
        // Manejar errores, por ejemplo, mostrar un mensaje de error al usuario
        console.error('Error loading XML file:', error);
      }
    }

    // Llamar a la función de carga de datos
    fetchData();
  }, []); // El segundo argumento del useEffect asegura que solo se ejecute una vez al montar el componente

  // Mostrar un mensaje de carga si los datos XML aún no se han cargado
  if (!xmlData) {
    return <div>Cargando...</div>;
  }

  // Hacer algo con los datos XML, por ejemplo, imprimirlos en la consola
  console.log(xmlData);

  // Renderizar los datos XML en tu componente
  return (
    <div>
      {/* Renderizar los datos XML en tu componente */}
    </div>
  );
}

export default TuComponente;