web-dev-qa-db-fra.com

Comment analyser xml dans Angular 2

J'utilise une API qui utilise XML au lieu de JSON. Des suggestions sur la conversion du XML suivant en JSON ou sur l'utilisation correcte des données dans une directive ngFor?

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

Basé sur la bibliothèque http://goessner.net/download/prj/jsonxml/ , j'ai implémenté un exemple 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 d'abord analyser 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:

Voir ce plunkr: https://plnkr.co/edit/dj63ASQAgrNcLLlwyAum?p=preview .

14
Thierry Templier

Je préférerais utiliser le module npm au lieu de Javascript car

  1. Ceci est TypeScript et non JavaScript
  2. tout en servant cela fonctionnerait, mais lors de la compilation ou de la distribution, cela ne fonctionnerait pas car cela donnerait une erreur xml2json n'est pas défini car il est disponible uniquement en javascript & Not in TS ou au moment de la transpilation. (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'));
3
Parth Ghiya

C'est si vous utilisez un POST et que vous récupériez une réponse XML: utilisez xml2js - https://www.npmjs.com/package/xml2js

  1. npm installe xml2js -g

  2. importer dans le fichier de service en tant que: import * en tant que xml2js à partir de 'xml2js';

  3. 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);              
      });
}
0
Malick