Konvertieren Sie XML in JSON in Angular

Muhammad Adil 30 Januar 2023
  1. Das XML-Format (Extensible Markup Language)
  2. Das JSON-Format (JavaScript Object Notation)
  3. Konvertieren Sie XML in JSON in Angular
  4. Eigenschaften des XML- und JSON-Formats
Konvertieren Sie XML in JSON in Angular

Wenn Sie Ihr Angular-XML in JSON konvertieren möchten, gibt es zwei Möglichkeiten: die eingebaute Angular-Funktion zu verwenden oder eine externe Bibliothek wie xml2js zu verwenden.

In diesem Artikel stellen wir die Schritte zur Konvertierung von XML in JSON mit Hilfe von xml2js vor. Aber bevor wir uns dem Konvertierungsabschnitt zuwenden, lassen Sie uns besprechen, was XML und JSON sind.

Das XML-Format (Extensible Markup Language)

XML steht für Extensible Markup Language. Es ist eine Auszeichnungssprache, die entwickelt wurde, um Datenstrukturen maschinenlesbar zu beschreiben.

XML wurde ursprünglich entwickelt, um Daten zwischen unterschiedlicher Software und Systemen auszutauschen, ohne Informationen oder Formatierung zu verlieren, sich auf proprietäre Formate zu verlassen und spezielle Tools für die Verarbeitung zu erfordern. Es organisiert Daten systematisch, ähnlich einem hierarchischen Baum, um die Komplexität zu minimieren und das Verständnis zu erleichtern.

Es speichert die empfangenen Informationen, wodurch es schwerer und langsamer wird. Beim Übertragen von Daten benötigen Sie eine schnelle Übertragungsgeschwindigkeit.

Das JSON-Format (JavaScript Object Notation)

JSON steht für JavaScript Object Notation. Es ist ein leichtes Datenaustauschformat.

JSON ist ein Open-Standard-Dateiformat, das menschenlesbaren Text verwendet, um Datenobjekte von Attribut-Wert-Paaren und Arrays (oder anderen serialisierbaren Werten) zu kommunizieren.

JSON wird überwiegend als Alternative zu XML verwendet, um Daten zwischen einem Server und einer Webanwendung zu übertragen. Das JSON-Format wurde ursprünglich so konzipiert, dass es für Menschen einfach zu lesen und zu schreiben ist und gleichzeitig schnell genug, um die Daten in ein effizientes Speichersystem umzuwandeln.

Konvertieren Sie XML in JSON in Angular

Nachfolgend finden Sie die Schritte zum Konvertieren von XML in JSON mit Hilfe von xml2js.

  1. Installieren Sie xml2js.

    npm install xml2js
    
  1. Laden Sie die XML-Datei, die konvertiert werden muss, in die Browser-Konsole mit,

    ('xml2json').parse(filePath)
    
  2. Konvertieren Sie die geladene XML-Datei mithilfe des folgenden Codes in eine Zeichenfolge der JavaScript Object Notation (JSON).

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

Beispiel:

TypeScript-Code:

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

HTML Quelltext:

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

Klicken Sie hier, um die Funktionsweise des obigen Codes zu überprüfen.

Eigenschaften des XML- und JSON-Formats

XML und JSON sind zwei unterschiedliche Formate für den Datenaustausch, die jeweils ihre Vor- und Nachteile haben. XML bietet mehr Flexibilität in Struktur und Inhalt, ist aber schwieriger zu handhaben, weil es nicht so gut lesbar ist wie JSON.

Auf der anderen Seite ist JSON leichter als XML, da es keine Tags oder Formatierungen verwendet, aber es kann mehr Bandbreite als XML beanspruchen, da es viele Anführungszeichen um Zeichenfolgen oder Zahlen einfügen muss.

Muhammad Adil avatar Muhammad Adil avatar

Muhammad Adil is a seasoned programmer and writer who has experience in various fields. He has been programming for over 5 years and have always loved the thrill of solving complex problems. He has skilled in PHP, Python, C++, Java, JavaScript, Ruby on Rails, AngularJS, ReactJS, HTML5 and CSS3. He enjoys putting his experience and knowledge into words.

Facebook

Verwandter Artikel - Angular JSON