在 Angular 中将 XML 转换为 JSON
如果你想将你的 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 占用更多带宽,因为它需要在字符串或数字周围包含大量引号。
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