在 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