Cómo analizar XML en Angular 2

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, ¿un observable sería apropiado aquí?

 123456789 20150101  20140101  // ...   1 025     234567890 20160401  20160401  //...   1 042    

 export class apiService { constructor (private http: Http) {} private _apiUrl = 'app/api'; getCaseFile () { return this.http.get(this._apiUrl) //conversion to JSON here? .map(res =>  res.json().data) .catch(this.handleError); } private handleError (error: Response) { console.error(error); return Observable.throw(error.json().error || 'Server error'); } } 
{{case-file.serial-number}}

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:

  • Parse XML usando JavaScript

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

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

  1. Esto es TypeScript y no JavaScript
  2. mientras sirva esto funcionaría, pero al hacer una comstackció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 transstackción (sucedió en mi caso)

Hice algo así.

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

Esto es si está utilizando hacer una POST y obtener respuesta XML: Use xml2js – https://www.npmjs.com/package/xml2js

  1. npm instala xml2js -g
  2. importar en archivo de servicio como: importar * como xml2js desde ‘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); }); }