Convert XML To JSON In AngularJS

Sibeesh Venu

AngularJS JSONXML AngularJSXML to JSON

22 Comments

Join the conversation! Your thoughts help the community grow.

Naveen Bisht10y ago
If i am using some complex JSON, in that case is it useful, i think it would impact the performance....kindly suggest.
Sibeesh Venu10y ago
Debasis Saha Thanks
Debasis Saha10y ago
Good One..
Sibeesh Venu10y ago
kalu singh rao Thanks
Sibeesh Venu10y ago
Sr Karthiga Thanks
Sibeesh Venu10y ago
Mohamed Gani Mn Thanks
kalu singh rao10y ago
Nice...
Sr Karthiga10y ago
Nice explanation
Sr Karthiga10y ago
Good one
Mohamed Gani Mn11y ago
good formation
Sibeesh Venu11y ago
Srinivasan K K Thanks a lot
Srinivasan K K11y ago
Sibeesh Venu Great and very useful article you presented:)
Sibeesh Venu11y ago
Manoj Kulkarni Thank you so much
Manoj Kulkarni11y ago
Nice article. Thank you for sharing Sibeesh.
Sibeesh Venu11y ago
Rajeesh Menoth Thanks buddy
Rajeesh Menoth11y ago
Good One
Sibeesh Venu11y ago
Rupali Shinde Thank you
Sibeesh Venu11y ago
Harshad Pansuriya Thank you
Rupali Shinde11y ago
good article
Harshad Pansuriya11y ago
Nice one Sibeesh
Sibeesh Venu11y ago
Humayun Kabir Mamun Thank you
Humayun Kabir Mamun11y ago
Nice...

As you all know AngularJS is a JavaScript framework for developing applications. So basically AngularJS expects the response in the form of JSON. Hence it is recommended to return the data in JSON format before you start to work on the data. Here in this post we will load a local XML file using AngularJS $http service, and we will convert the same XML file to JSON. If you are new to AngularJS, please read here: Angular JS. I hope you will like this article.

Background

I have already posted an article related to $http service in Angular JS, you can see here.

Source Code

Please download the source code here: XML to JSON Source Code

Using the code

Create an html page first,

<!DOCTYPE html>
<html>
<head>
<title>Convert XML to JSON In Angular JS - SibeeshPassion </title>
</head>
<body>
</body>
</html>

Now add the needed reference as follows:

<script src="jquery-2.1.3.min.js"></script>
<script src="angular.min.js"></script>
<script src="xml2json.js"></script>

Have you noticed that I have added xml2json.js file? This is the file which is doing the conversion part. You can always download the file from the following link.

Now create a controller and app directive as follows::

<div ng-app="httpApp" ng-controller="httpController">
</div>

Next thing we need to do is adding the service. You can add the $http service as follows:

<script>
var app = angular.module('httpApp', []);
app.controller('httpController', function($scope, $http)
{
$http.get("Sitemap.xml",
{
transformResponse: function(cnv)
{
var x2js = new X2JS();
var aftCnv = x2js.xml_str2json(cnv);
return aftCnv;
}
}).success(function(response)
{
console.log(response);
});
});
</script>

Here httpApp is our app and httpController is our controller. And we are transforming our response using the function transformResponse.

Transforming Request and Response

In AngularJS, requests can be transformed using a function called transformRequest and if it is a response we can transform by function transformResponse. These functions returns the transformed values.

Here in our example we are using the transformResponse function as follows:

transformResponse: function(cnv)
{
var x2js = new X2JS();
var aftCnv = x2js.xml_str2json(cnv);
return aftCnv;
}

The x2js.xml_str2json(cnv) will return the json object and we return aftCnv from the function transformResponse. Sounds good? Once we are done with everything, we are just writing the JSON object in the browser console, so that we can see the object.

Output

Convert XML To JSON In Angular JS

That’s all we have done everything.

Conclusion

Did I miss anything that you may think which is needed? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

If you have any questions, then please mention in the comments section.