Convertir XML en JSON en Angular

1. Le format XML (Extensible Markup Language)
2. Le format JSON (JavaScript Object Notation)
3. Convertir XML en JSON en Angular
4. Propriétés des formats XML et JSON

Si vous voulez convertir votre XML Angular en JSON, il y a deux façons de le faire : en utilisant la fonction Angular intégrée ou en utilisant une bibliothèque externe comme xml2js.

Dans cet article, nous fournirons les étapes pour convertir XML en JSON à l’aide de xml2js. Mais avant de passer à la section de conversion, discutons de ce que sont XML et JSON.

Le format XML (Extensible Markup Language)

XML signifie Extensible Markup Language. C’est un langage de balisage conçu pour décrire la structure de données de manière lisible par machine.

XML a été initialement développé pour partager des données entre différents logiciels et systèmes sans perdre d’informations ou de formatage, en s’appuyant sur des formats propriétaires et en nécessitant des outils spéciaux pour le traitement. Il organise les données de manière systématique, semblable à un arbre hiérarchique, pour minimiser la complexité et faciliter la compréhension.

Il enregistre les informations qu’il reçoit, les rendant plus lourdes et plus lentes. Lors du transfert de données, vous aurez besoin d’une vitesse de transmission rapide.

Le format JSON (JavaScript Object Notation)

JSON signifie JavaScript Object Notation. Il s’agit d’un format d’échange de données léger.

JSON est un format de fichier standard ouvert qui utilise du texte lisible par l’homme pour communiquer des objets de données de paires et de tableaux attribut-valeur (ou toute autre valeur sérialisable).

JSON est principalement utilisé pour transférer des données entre un serveur et une application Web comme alternative à XML. Le format JSON a été initialement conçu pour être facile à lire et à écrire pour les humains tout en étant suffisamment rapide pour convertir les données en un système de stockage efficace.

Convertir XML en JSON en Angular

Vous trouverez ci-dessous les étapes de conversion de XML en JSON à l’aide de xml2js.

1. Installez xml2js.

   npm install xml2js
   

2. Chargez le fichier XML qui doit être converti dans la console du navigateur en utilisant,

   ('xml2json').parse(filePath)
   

3. Convertissez le fichier XML chargé en une chaîne de JavaScript Object Notation (JSON) en utilisant le code suivant.

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

Exemple:

Code 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);
    }
}

Code HTML:

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

Cliquez ici pour vérifier le fonctionnement du code ci-dessus.

Propriétés des formats XML et JSON

XML et JSON sont deux formats différents d’échange de données, chacun ayant ses avantages et ses inconvénients. XML offre plus de flexibilité dans la structure et le contenu, mais il est plus difficile à utiliser car il n’est pas aussi lisible par l’homme que JSON.

D’autre part, JSON est plus léger que XML car il n’utilise aucune balise ni mise en forme, mais il peut utiliser plus de bande passante que XML car il doit inclure de nombreux guillemets autour des chaînes ou des nombres.