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