Comment analyser xml dans Angular 2

J'utilise une API qui utilise XML au lieu de JSON. Des suggestions sur la façon de convertir le XML suivant en JSON ou comment utiliser correctement les données dans une directive ngFor?

De plus, un observable serait-il approprié ici?

<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>

Basé sur la bibliothèque http://goessner.net/download/prj/jsonxml/ , j'ai mis en place un échantillon pour recevoir des données XML et les analyser dans une application 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(),' ')));

Pour pouvoir utiliser la bibliothèque, vous devez analyser d'abord la chaîne 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"); }

Voir cette question:

Analysez XML en utilisant JavaScript

Voir ceci plunkr: https://plnkr.co/edit/dj63ASQAgrNcLLwyAum?p=preview .

Je préfère aller avec le module npm au lieu de Javascript parce que

C'est TypeScript et non JavaScript
Tout en servant cela fonctionnerait, mais tout en faisant une compilation ou une distribution, il ne fonctionnera pas car il donnera une erreur. Xml2json n'est pas défini car il est disponible uniquement en javascript et non dans TS ou au moment de la transpilation. (Est arrivé dans mon cas)

J'ai fait quelque chose comme ça.

 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'));

Ceci est si vous utilisez un POST et récupérez la réponse XML: utilisez xml2js – https://www.npmjs.com/package/xml2js

Npm installation xml2js -g
Importer dans le fichier de service comme: import * comme xml2js de 'xml2js';

Code:

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