Convertir XML a JSON en JavaScript

1. El lenguaje de marcado extensible (XML)
2. La notación de objetos de JavaScript (JSON)
3. Utilice el método matchAll() para convertir XML a JSON en JavaScript

En este artículo, aprenderemos cómo convertir cadenas XML a datos de formato JSON con la ayuda de expresiones regulares y el método de cadena predeterminado matchAll() en JavaScript.

El lenguaje de marcado extensible (XML)

El lenguaje de marcado extensible (XML) es un lenguaje de marcado cercano a HTML. No tiene etiquetas predefinidas como HTML, pero podemos definir nuestras etiquetas para nuestros requisitos.

Podemos almacenar, buscar y compartir los datos usando XML.

Ejemplo:

<root>
<tag>tag content</tag>
<tag2>another content</tag2>
</root>

Necesitamos abrir y cerrar la etiqueta con / como HTML.

La notación de objetos de JavaScript (JSON)

La notación de objetos de JavaScript (JSON) es un formato de texto para almacenar y transportar datos. Es autodescriptivo y fácil de entender.

En JSON, almacenamos datos en pares clave-valor (cada clave tiene un valor).

Ejemplo:

'{"name":"Bravo", "age":40, "car":null}'

Utilice el método matchAll() para convertir XML a JSON en JavaScript

Hay varias formas de convertir o traducir datos XML a JSON con precisión. Aprenderemos a convertir XML a JSON usando regex (expresión regular) y el método de cadena de JavaScript predeterminado matchAll().

El método de JavaScript matchAll() devuelve un iterador de todos los resultados haciendo coincidir una cadena con la ayuda de la expresión regular proporcionada.

Entrada proporcionada por el usuario (XML):

<root><tag>tag content</tag><tag2>another content</tag2></root>

Salida JSON esperada después de la conversión:

[object Object] {
    root: [object Object] {
        tag: "tag content",
        tag2: "another content"
    }
}

En el siguiente ejemplo, usaremos una cadena XML e implementaremos el método matchALL() con expresiones regulares para convertirlo al formato de datos JSON.

Regex requerido:

regex = /(?:<(\w*)(?:\s[^>]*)*>)((?:(?!<\1).)*)(?:<\/\1>)|<(\w*)(?:\s*)*\/>/gm;

Ejemplo:

<script>
const xmlString = '<root><tag>tag content</tag><tag2>another content</tag2></root>'; //provided xml

function convertXmlToJson(xmlString) {
    const jsonData = {};
    for (const result of xmlString.matchAll(/(?:<(\w*)(?:\s[^>]*)*>)((?:(?!<\1).)*)(?:<\/\1>)|<(\w*)(?:\s*)*\/>/gm)) {
        const key = result[1] || result[3];
        const value = result[2] && convertXmlToJson(result[2]); //recusrion
        jsonData[key] = ((value && Object.keys(value).length) ? value : result[2]) || null;
    }
    return jsonData;
}
console.log("Data after converting to JSON:")
console.log(convertXmlToJson(xmlString)); //print the result in logs
</script>

Producción :

"Data after converting to JSON:"
[object Object] {
    root: [object Object] {
        tag: "tag content",
        tag2: "another content"
    }
}

Explicación:

• En el ejemplo, inicializamos la cadena XML en una variable para generar datos JSON.

• Hemos declarado una función convertXmlToJson() para obtener la cadena XML como argumento.

• En esa función, usamos el bucle for para iterar la ejecución en la cadena XML con matchAll(regex).

• Dentro del cuerpo del bucle, estamos creando claves y valores y almacenando el resultado en la variable ya declarada const jsonData = {}.

• Puedes ver una función llamada convertXmlToJson() dentro del propio cuerpo. Se conoce como recursividad (función recursiva).

  Las funciones recursivas se llaman entre llaves para iterar la ejecución.

• Luego, simplemente devolvemos el convertXmlToJson() con la variable jsonData.

• Usamos el método console.log() para llamar a la función y mostrar el resultado devuelto.