xml2js - Cómo analizar xml en Angular 2

xml2json angular

Question

Estoy usando una API que usa XML en lugar de JSON. ¿Alguna sugerencia sobre cómo convertir el siguiente XML a JSON o cómo usar correctamente los datos en una directiva ngFor?

Además, ¿sería apropiado un observable aquí?

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

Answer 1

Basado en la biblioteca http://goessner.net/download/prj/jsonxml/ , implementé una muestra para recibir datos XML y analizarlos en una aplicación 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(),'' '')));

Para poder usar la biblioteca, primero debe analizar la cadena 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");
}

Ver esta pregunta:

• Analizar XML usando JavaScript

Vea este plunkr: https://plnkr.co/edit/dj63ASQAgrNcLLlwyAum?p=preview .

Answer 2

Esto es si está utilizando una POST y obteniendo una respuesta XML: use xml2js - https://www.npmjs.com/package/xml2js

1. npm install xml2js -g

2. importar en el archivo de servicio como: import * as xml2js from ''xml2js'';

3. Código:

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

Answer 3

Prefiero ir con el módulo npm en lugar de Javascript porque

1. Esto es TypeScript y no JavaScript
2. mientras sirve esto funcionaría, pero al hacer una compilación o distribución no funcionará, ya que dará error xml2json no está definido ya que está disponible solo en javascript y no en TS o en el momento de la transpilación. (sucedió en mi caso)

Hice algo como esto

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