Convertir XML a JSON en Angular

1. El formato XML (Extensible Markup Language)
2. El formato JSON (JavaScript Object Notation)
3. Convertir XML a JSON en Angular
4. Propiedades del formato XML y JSON

Si desea convertir su Angular XML a JSON, hay dos formas de hacerlo: usando la función Angular incorporada o usando una biblioteca externa como xml2js.

En este artículo, proporcionaremos los pasos para convertir XML a JSON con la ayuda de xml2js. Pero antes de pasar a la sección de conversión, analicemos qué son XML y JSON.

El formato XML (Extensible Markup Language)

XML significa Lenguaje de marcado extensible. Es un lenguaje de marcado diseñado para describir la estructura de datos de forma legible por máquina.

XML se desarrolló inicialmente para compartir datos entre diferentes software y sistemas sin perder información o formato, confiando en formatos propietarios y requiriendo herramientas especiales para el procesamiento. Organiza los datos sistemáticamente, de forma similar a un árbol jerárquico, para minimizar la complejidad y facilitar su comprensión.

Guarda la información que recibe, haciéndola más pesada y lenta. Al transferir datos, necesitará una velocidad de transmisión rápida.

El formato JSON (JavaScript Object Notation)

JSON son las siglas de JavaScript Object Notation. Es un formato ligero de intercambio de datos.

JSON es un formato de archivo de estándar abierto que emplea texto legible por humanos para comunicar objetos de datos de pares y matrices de atributos y valores (o cualquier otro valor serializable).

JSON se usa predominantemente para transferir datos entre un servidor y una aplicación web como alternativa a XML. El formato JSON se diseñó inicialmente para que los humanos lo leyeran y escribieran con facilidad y, al mismo tiempo, lo suficientemente rápido como para convertir los datos en un sistema de almacenamiento eficiente.

Convertir XML a JSON en Angular

A continuación se muestran los pasos para convertir XML a JSON con la ayuda de xml2js.

1. Instale xml2js.

   npm install xml2js
   

2. Cargue el archivo XML que necesita conversión en la consola del navegador usando,

   ('xml2json').parse(filePath)
   

3. Convierta el archivo XML cargado en una cadena de notación de objetos JavaScript (JSON) utilizando el siguiente código.

   var obj = require('xml2json').parse(filePath); console.log(obj);
   

Ejemplo:

Código TypeScript:

import { Component, OnInit } from '@angular/core';
import { NgxXml2jsonService } from 'ngx-xml2json';
@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
    name = 'Angular';
    objs: any = {};
    xml = `    <inform lastUpdated="2022-12-18T05:18:43">
        <NameInfo>
            <Name type="NAICS" order="1" reported="0"  mnem="">Steve</Name>
            <Name type="NAICS" order="2" reported="0" mnem="">Adil</Name>
    </inform>`;
    constructor(private ngxXml2jsonService: NgxXml2jsonService) {
    }
    ngOnInit() {
        const parser = new DOMParser();
        const xml = parser.parseFromString(this.xml, 'text/xml');
        const obj = this.ngxXml2jsonService.xmlToJson(xml);
        this.objs = obj
        console.log(this.objs);
    }
}

Código HTML:

<h2>Example of XML to JSON conversion in Angular</h2>
<ul>
    <li *ngFor="let data of objs?.inform?.NameInfo?.Name">{{data}}</li>
</ul>

Haga clic aquí para comprobar el funcionamiento del código anterior.

Propiedades del formato XML y JSON

XML y JSON son dos formatos diferentes de intercambio de datos, cada uno con sus pros y sus contras. XML ofrece más flexibilidad en estructura y contenido, pero es más difícil trabajar con él porque no es tan legible como JSON.

Por otro lado, JSON es más ligero que XML porque no usa etiquetas ni formato, pero puede ocupar más ancho de banda que XML porque necesita incluir muchas comillas alrededor de cadenas o números.