在 Angular 中將 XML 轉換為 JSON

Muhammad Adil 2023年1月30日 2022年4月20日
  1. XML 格式(可擴充套件標記語言)
  2. JSON 格式(JavaScript 物件表示法)
  3. 在 Angular 中將 XML 轉換為 JSON
  4. XML 和 JSON 格式的屬性
在 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 的步驟。

  1. 安裝 xml2js

    npm install xml2js
    
  1. 載入需要轉換的 XML 檔案到瀏覽器控制檯使用,

    ('xml2json').parse(filePath)
    
  2. 使用以下程式碼將載入的 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 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

相關文章 - Angular JSON