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?

A

Answer 1

This is if you are using doing a POST and getting back XML response: Use xml2js - https://www.npmjs.com/package/xml2js

1. npm install xml2js -g

2. import in service file as : import * as xml2js from '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);              
         });
   }
   

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

Answer 3

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.