Angular で XML を JSON に変換する

1. XML 形式（拡張マークアップ言語）
2. JSON 形式（JavaScript Object Notation）について
3. Angular で XML を JSON に変換する
4. XML および JSON 形式のプロパティ

Angular XML を JSON に変換する場合は、組み込みの Angular 関数を使用する方法と、xml2js などの外部ライブラリを使用する方法の 2つがあります。

この記事では、xml2js を使用して XML を JSON に変換する手順を説明します。ただし、変換セクションに移る前に、XML と JSON について説明しましょう。

XML 形式（拡張マークアップ言語）

XML は Extensible Markup Language の略です。これは、データ構造を機械で読み取り可能な方法で記述するために設計されたマークアップ言語です。

XML は当初、情報やフォーマットを失うことなく、独自のフォーマットに依存し、処理に特別なツールを必要とせずに、異なるソフトウェアやシステム間でデータを共有するために開発されました。階層ツリーのようにデータを体系的に整理して、複雑さを最小限に抑え、理解しやすくします。

受け取った情報を保存し、重くて遅くします。データを転送するときは、速い伝送速度が必要になります。

JSON 形式（JavaScript Object Notation）について

JSON は JavaScript Object Notation の略です。軽量のデータ交換フォーマットです。

JSON は、人間が読めるテキストを使用して、属性と値のペアおよび配列（またはその他のシリアル化可能な値）のデータオブジェクトを通信するオープンスタンダードのファイル形式です。

JSON は主に、XML の代わりにサーバーと Web アプリケーション間でデータを転送するために使用されます。JSON 形式は当初、データを効率的なストレージシステムに変換するのに十分な速度でありながら、人間が簡単に読み書きできるように設計されていました。

Angular で XML を JSON に変換する

以下は、xml2js を使用して XML を JSON に変換する手順です。

1. xml2js をインストールします。

   npm install xml2js
   

2. 以下を使用して、変換が必要な XML ファイルをブラウザコンソールにロードします。

   ('xml2json').parse(filePath)
   

3. 次のコードを使用して、ロードされた XML ファイルを JavaScript Object Notation（JSON）の文字列に変換します。

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

例：

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

HTML コード：

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

ここをクリックして、上記のコードの動作を確認してください。

XML および JSON 形式のプロパティ

XML と JSON は、データ交換の 2つの異なる形式であり、それぞれに長所と短所があります。XML は構造とコンテンツの柔軟性を高めますが、JSON ほど人間が読める形式ではないため、操作が難しくなります。

一方、JSON はタグやフォーマットを使用しないため XML よりも軽量ですが、文字列や数値を引用符で囲む必要があるため、XML よりも多くの帯域幅を使用する可能性があります。