How to parse xml in Angular 2

Question

I'm using an API that uses XML instead of JSON. Any suggestions on how to convert the following XML to JSON or how to properly use the data in an ngFor directive?

Also, would an observable be appropriate here?

<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

Based on the library http://goessner.net/download/prj/jsonxml/, I implemented a sample to receive XML data and parse them into an Angular2 application:

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

To be able to use the library, you need to parse first the XML string:

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

See this question:

• Parse XML using JavaScript

See this plunkr: https://plnkr.co/edit/dj63ASQAgrNcLLlwyAum?p=preview.

Answer 2

I would rather go with npm module instead of Javascript because

1. This is TypeScript & not JavaScript
2. while serving this would work, but while making a build or distribution it wont work as it will give error xml2json is not defined as it is available only in javascript & Not in TS or at the time of transpilation.(happened in my case)

I did something like this.

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