web-dev-qa-db-ja.com

Angular 2でxmlを解析する方法

JSONの代わりにXMLを使用するAPIを使用しています。次のXMLをJSONに変換する方法、またはngForディレクティブでデータを適切に使用する方法に関する提案はありますか？

また、ここでは観測可能なものが適切でしょうか？

<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>
xmlangulartypescriptobservable
20
Ken

ライブラリ http://goessner.net/download/prj/jsonxml/ に基づいて、XMLデータを受信し、Angular2アプリケーションに解析するサンプルを実装しました。

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文字列を解析する必要があります。

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");
}

この質問をご覧ください：

このplunkrを参照してください： https://plnkr.co/edit/dj63ASQAgrNcLLlwyAum?p=preview 。

14
Thierry Templier

私はむしろJavaScriptの代わりにnpmモジュールで行きたいので

  1. これはJavaScriptではなくTypeScriptです
  2. これを提供している間は動作しますが、ビルドまたはディストリビューションを作成しているときにエラーが発生するため動作しません

私はこのようなことをしました。

var parser = new xml2js.Parser({explicitArray : false});
//used xml2js parser from npm (https://www.npmjs.com/package/xml2js)
//and in my service i used this 
this.http.get(this.newsURL)
                .flatMap(res=>{
                        return Observable.fromPromise(this.getJSON(res.text()))
                })
                .catch((error:any) => Observable.throw(error.json().error || 'Server error'));
3
Parth Ghiya

これは、POSTを実行してXML応答を取得する場合：Use xml2js- https://www.npmjs.com/package/xml2js

  1. npm install xml2js -g

  2. サービスファイルにインポート：import * as xml2js from 'xml2js';

  3. コード：

    let formdata = new URLSearchParams();
formdata.set('username','username');
formdata.set('pw','pw');

let headers = new Headers({'Content-Type': 'application/x-www-form-urlencoded' });

let options = new RequestOptions({ headers: headers, method: RequestMethod.Post});      

postCaseFile () {

     this.http.post(this._apiUrl, formdata.toString(), options)
     //convert to JSON here
     .map(res => {
                xml2js.parseString( res.text(), function (err, result) {
                console.dir(result); // Prints JSON object!
           });
      }).subscribe(data => {    
        console.log(data);              
      });
}
0
Malick