Angular2: Convert XML to JSON

Question

I wanted to convert the XML I received from Web API response to JSON in Angular 2. The application is developed in Nativescript. Not able to find a solution for this.

Waxplant

Did you tried this one: npmjs.com/package/nativescript-xml2js – Radbun

Duplicate of #36368905. – Irena

Possible duplicate of How to parse xml in Angular 2 – Hypnotist

As informed by Nativescript team and as experimented, none of the above said modules seems to be working with nativescript angular 2. So is there any other alternatives which can be used with nativescript angular 2. – Waxplant

Weird, so you looked up support for the nativescript-xml2js and it said it it does not work for nativescript? – Fibrilliform

nativescript-xml2js wont work with nativescript. They said like the author of the plugin is not an active member and this is not something which is supported in nativescript. Just the name is confusing. Nativescript has not yet provided a proper solution for this. – Waxplant

Answer 1

I found an amazing package to make this very simple.

xml2js

For me on I am doing it in an angular 2 application but on the node side.

npm install xml2js --save

It is literally as simple as passing the xml like this,

var parseString = require('xml2js').parseString;
var xml = "<root>Hello xml2js!</root>"
parseString(xml, function (err, result) {
    console.dir(result);
});

In my app I had an xml file and used it like this,

var fs = require('fs');
var parseString = require('xml2js').parseString;

function requestCreditReport(callback) {
    fs.readFile('./credit-api/response.xml', 'utf8', function (err,data) {
        if (err) return callback(err);
        parseString(data, callback);
    });
}

See this jsfiddle

I hope this helps.

Fibrilliform

Somehow i am not able see the log inside the parseAtring function. Soap envelop is my response from web api. – Waxplant

So you are saying that you are trying to console result and it is not working? would you please console.log outside of the function a test. To make sure we are running the file. – Fibrilliform

The console.dir is not working and i am not sure how to get the result out of it. var parseString = require('xml2js').parseString; var xml = "<root>Hello xml2js!</root>" parseString(xml, function (err, result) { console.dir(result); }); – Waxplant

try this, var parseString = require('xml2js').parseString; var xml = "<root>Hello xml2js!</root>"; var jString = parseString(xml); console.log(jString); – Fibrilliform

I am getting the below error when i try to use the xml2js module. 03-17 02:37:48.190: V/JS(7130): error ::: Error: com.tns.NativeScriptException: Failed to find module: "events", relative to: app/tns_modules/ 03-17 02:37:48.190: V/JS(7130): com.tns.Module.resolvePathHelper(Module.java:159) 03-17 02:37:48.190: V/JS(7130): com.tns.Module.resolvePath(Module.java:60) 03-17 02:37:48.190: V/JS(7130): com.tns.Runtime.callJSMethodNative(Native Method) – Waxplant

I do not know for sure if that will work for nativescript. But here is an event module. This could have something else to do with your app npmjs.com/package/events – Fibrilliform

Wait see if this makes a difference npmjs.com/package/nativescript-xml2js – Fibrilliform

Also this might help you too runkit.com/npm/nativescript-xml2js – Fibrilliform

using nativescript-xml2js.I am getting the below exception.'Error: com.tns.NativeScriptException:Failed to find module: "xml2js", relative to: app/tns_modules/' the i am using is below, getJsonfromXml() { try{ let parseString = require('xml2js').parseString; let xml = "<root>Hello xml2js!</root>"; parseString(xml, function (err, result) { if (err) throw err; console.dir(result); }); } catch (e){ console.log("error :: "+e); } } – Waxplant

As informed by Nativescript team and as experimented, none of the above said modules seems to be working with nativescript angular 2. So is there any other alternatives which can be used with nativescript angular 2. – Waxplant

Answer 2

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

1. npm install xml2js --save

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});
   
   postData () {
   
        this.http.post(this._yourUrl, 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);              
        });
   }
   

Bissextile

Answer 3

function parseXml(xmlStr) {
    var result;
    var parser = require('xml2js');
    parser.Parser().parseString(xmlStr, (e, r) => {result = r});
    return result;
}

Attorney

Add some more context to your code to help future readers better understand its purpose. – Gere