Angular에서 XML을 JSON으로 변환

1. XML 형식(Extensible Markup Language)
2. JSON 형식(JavaScript 객체 표기법)
3. Angular에서 XML을 JSON으로 변환
4. XML 및 JSON 형식의 속성

Angular XML을 JSON으로 변환하려면 내장 Angular 함수를 사용하거나 xml2js와 같은 외부 라이브러리를 사용하는 두 가지 방법이 있습니다.

이 기사에서는 xml2js를 사용하여 XML을 JSON으로 변환하는 단계를 제공합니다. 그러나 변환 섹션으로 이동하기 전에 XML과 JSON이 무엇인지 논의합시다.

XML 형식(Extensible Markup Language)

XML은 Extensible Markup Language의 약자입니다. 데이터 구조를 기계가 읽을 수 있는 방식으로 설명하도록 설계된 마크업 언어입니다.

XML은 처음에 정보나 형식을 잃지 않고 독점 형식에 의존하고 처리를 위한 특수 도구를 요구하지 않고 서로 다른 소프트웨어와 시스템 간에 데이터를 공유하기 위해 개발되었습니다. 계층적 트리와 유사하게 데이터를 체계적으로 구성하여 복잡성을 최소화하고 이해하기 쉽도록 합니다.

받는 정보를 저장하여 더 무겁고 느리게 만듭니다. 데이터를 전송할 때 빠른 전송 속도가 필요합니다.

JSON 형식(JavaScript 객체 표기법)

JSON은 JavaScript Object Notation의 약자입니다. 가벼운 데이터 교환 형식입니다.

JSON은 속성-값 쌍 및 배열(또는 기타 직렬화 가능한 값)의 데이터 개체를 전달하기 위해 사람이 읽을 수 있는 텍스트를 사용하는 개방형 표준 파일 형식입니다.

JSON은 XML 대신 서버와 웹 애플리케이션 간에 데이터를 전송하는 데 주로 사용됩니다. JSON 형식은 처음에 데이터를 효율적인 저장 시스템으로 변환할 수 있을 만큼 빠르면서도 사람이 읽고 쓰기 쉽게 설계되었습니다.

Angular에서 XML을 JSON으로 변환

다음은 xml2js를 사용하여 XML을 JSON으로 변환하는 단계입니다.

1. xml2js를 설치합니다.

   npm install xml2js
   

2. 변환이 필요한 XML 파일을 다음을 사용하여 브라우저 콘솔에 로드합니다.

   ('xml2json').parse(filePath)
   

3. 다음 코드를 사용하여 로드된 XML 파일을 JSON(JavaScript Object Notation) 문자열로 변환합니다.

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

예시:

타입스크립트 코드:

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보다 더 많은 대역폭을 차지할 수 있습니다.