如何在 Angular 2 中解析 xml [英] How to parse xml in Angular 2

问题描述

我使用的 API 使用 XML 而不是 JSON.关于如何将以下 XML 转换为 JSON 或如何在 ngFor 指令中正确使用数据的任何建议?

I'm using an API that uses XML instead of JSON. Any suggestions on how to convert the following XML to JSON or how to properly use the data in an ngFor directive?

另外，这里是否适合使用 observable?

Also, would an observable be appropriate here?

<case-file>
  <serial-number>123456789</serial-number>
    <transaction-date>20150101</transaction-date>
      <case-file-header>
       <filing-date>20140101</filing-date>
      </case-file-header>
 // ...
   <classifications>
  <classification>
   <international-code-total-no>1</international-code-total-no>
   <primary-code>025</primary-code>
  </classification>
 </classifications>
 </case-file>
 <case-file>
     <serial-number>234567890</serial-number>
    <transaction-date>20160401</transaction-date>
      <case-file-header>
       <filing-date>20160401</filing-date>
      </case-file-header>
//...
   <classifications>
  <classification>
   <international-code-total-no>1</international-code-total-no>
   <primary-code>042</primary-code>
  </classification>
 </classifications>
</case-file>

<小时>

export class apiService {
   constructor (private http: Http) {}

   private _apiUrl = 'app/api';  

   getCaseFile () {
     return this.http.get(this._apiUrl)
//conversion to JSON here?
                    .map(res => <CaseFile[]> res.json().data)
                     .catch(this.handleError);
   }
    private handleError (error: Response) {

     console.error(error);
    return Observable.throw(error.json().error || 'Server error');
   }
 }

<div *ngFor="#cf of case-file">{{case-file.serial-number}}</div>

推荐答案

基于库 http://goessner.net/download/prj/jsonxml/，我实现了一个示例来接收 XML 数据并将它们解析为 Angular2 应用程序:

Based on the library http://goessner.net/download/prj/jsonxml/, I implemented a sample to receive XML data and parse them into an Angular2 application:

var headers = new Headers();
(...)
headers.append('Accept', 'application/xml');

return this.http.get('https://angular2.apispark.net/v1/companies/', {
  headers: headers
}).map(res => JSON.parse(xml2json(res.text(),'  ')));

为了能够使用该库，您需要先解析 XML 字符串:

To be able to use the library, you need to parse first the XML string:

var parseXml;

if (typeof window.DOMParser != "undefined") {
  parseXml = function(xmlStr) {
    return ( new window.DOMParser() ).parseFromString(xmlStr, "text/xml");
  };
} else if (typeof window.ActiveXObject != "undefined" &&
   new window.ActiveXObject("Microsoft.XMLDOM")) {
    parseXml = function(xmlStr) {
      var xmlDoc = new window.ActiveXObject("Microsoft.XMLDOM");
      xmlDoc.async = "false";
      xmlDoc.loadXML(xmlStr);
      return xmlDoc;
  };
} else {
  throw new Error("No XML parser found");
}

看到这个问题:

• 使用 JavaScript 解析 XML

查看此 plunkr:https://plnkr.co/edit/dj63ASQAgrNcLLlwyAum?p=preview.

See this plunkr: https://plnkr.co/edit/dj63ASQAgrNcLLlwyAum?p=preview.

这篇关于如何在 Angular 2 中解析 xml的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！