Jak analizować xml w Angular 2

Question

Używam API, które używa XML zamiast JSON. Wszelkie sugestie, w jaki sposób przekonwertować poniższy XML na JSON lub jak poprawnie korzystać z danych w dyrektywie ngFor?

Również, czy obserwowalne byłoby odpowiednie tutaj?

<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

oparciu o bibliotekę http://goessner.net/download/prj/jsonxml/, I wdrożone próbki otrzymane dane XML i przetwarza je do aplikacji 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(),' '))); 

Aby móc korzystać z biblioteki, musisz najpierw przeanalizować łańcuch 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"); 
} 

Zobacz na to pytanie:

• Parse XML using JavaScript

zobaczyć ten plunkr: https://plnkr.co/edit/dj63ASQAgrNcLLlwyAum?p=preview.

Answer 2

wolałbym iść z modułem npm zamiast JavaScript ponieważ

1. To maszynopis & nie JavaScript
2. służąc to będzie działać, ale podczas tworzenia kompilacji lub dystrybucji to nie będzie działać, jak to daje błąd xml2json nie jest zdefiniowana, ponieważ jest dostępny tylko w javascript & nie w TS lub w momencie transpilation. (stało się w moim przypadku)

zrobiłem coś takiego.

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

Answer 3

to jeśli używasz robi POST i wracając odpowiedź XML: Stosować xml2js - https://www.npmjs.com/package/xml2js

1. npm zainstalować xml2js -g

2. importu w pliku usług jak: importu * jako xml2js z "xml2js";

3. Kod:

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