迹忆客 专注技术分享

如果你想将你的 Angular XML 转换为 JSON，有两种方法可以做到：使用内置的 Angular 函数或使用像 xml2js 这样的外部库。

在本文中，我们将提供借助 xml2js 将 XML 转换为 JSON 的步骤。但在进入转换部分之前，让我们讨论一下 XML 和 JSON 是什么。

XML 格式（可扩展标记语言）

XML 代表可扩展标记语言。它是一种标记语言，旨在以机器可读的方式描述数据结构。

最初开发 XML 是为了在不同软件和系统之间共享数据，而不会丢失信息或格式，依赖于专有格式，并且需要特殊的处理工具。它系统地组织数据，类似于分层树，以最大限度地减少复杂性并使其更易于理解。

它保存接收到的信息，使其变得更重和更慢。传输数据时，你需要快速的传输速度。

JSON 格式（JavaScript 对象表示法）

JSON 代表 JavaScript 对象表示法。它是一种轻量级的数据交换格式。

JSON 是一种开放标准的文件格式，它使用人类可读的文本来传达属性值对和数组（或任何其他可序列化值）的数据对象。

JSON 主要用于在服务器和 Web 应用程序之间传输数据，作为 XML 的替代方案。JSON 格式最初被设计为便于人类读写，同时速度足够快，可以将数据转换为高效的存储系统。

在 Angular 中将 XML 转换为 JSON

以下是在 xml2js 的帮助下将 XML 转换为 JSON 的步骤。

安装 xml2js。

npm install xml2js

加载需要转换的 XML 文件到浏览器控制台使用，

('xml2json').parse(filePath)

使用以下代码将加载的 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 是两种不同的数据交换格式，各有优缺点。XML 在结构和内容方面提供了更大的灵活性，但它更难使用，因为它不像 JSON 那样可读。

另一方面，JSON 比 XML 更轻量，因为它不使用任何标签或格式，但它比 XML 占用更多带宽，因为它需要在字符串或数字周围包含大量引号。