Convert XML data to Json AngularJS format

Question

I am trying to use the Treeview directive from AngularJS. The stored procedure returns xml. The tree view directive accepts the json format. The controller will receive data from the service. I am stuck trying to convert xml to json in service.

The following is the xml structure:

<Company Data="New Company"> <Manager Data="Working"> <Employee Data="ABC" /> <Employee Data="DEF" /> <Employee Data="GHI"> <SubEmployee Data="Approval"> <Stuff Data="Financial" /> <Stuff Data="Consol" /> </SubEmployee> <SubEmployee Data="Rolled-Over"> <Stuff Data="Corporate" /> </SubEmployee> </Employee> </Manager> </Company> 

Below is the expected JSON:

 [ { label: "New Company", id: "Company", children: [ { label: "Working", id: "Manager", children: [ { label: "ABC", id: "Employee", children: [ ] }, { label: "DEF", id: "Employee", children: [ ] }, { label: "GHI", id: "Employee", children: [ { label: "Approval", id: "SubEmployee", children: [ { label: "Financial", id: "Stuff", children: [ ] }, { label: "Consol", id: "Stuff", children: [ ] } ] }, { label: "RolledOver", id: "SubEmployee", children: [ { label: "Corporate", id: "Stuff", children: [ ] } ] } ] } ] } ] 

Answer 1

You have two options:

• Returns data from the API in the required JSON format.
• Convert XML to JSON in an angular application using javascript.

I would recommend option 1, if possible. For option 2, consider this question, which rejects the conversion of XML / JSON to Javascript " Convert XML to JSON (and vice versa) using Javascript "

If you read the answers from the link above, you will see why option 1 is preferred. Converting between these formats can be problematic.

Answer 2

If you have jQuery available on this page, you can convert the XML to a DOM object by doing var data = jQuery(data); . Then use the jQuery selector to extract the necessary data from it.

Some examples:

 // Extract an attribute from a node: $scope.event.isLive = jQuery(data).find('event').attr('state') === 'Live'; // Extract a node value: $scope.event.title = jQuery('title', data).text(); 

Answer 3

A little late, but I also need to look at this option, since I will work with a CMS that only parses XML. At what stage of the game I don’t know why ... but I’m distracted.

This is detected in the D-Zone and seems to have potential: https://dzone.com/articles/convert-xml-to-json-in-angular-js

Basically, you make a request for XML and then convert it to JSON in another function. Of course, you still pull the XML data, but you can work with JSON, which will save you a lot of time.

EX from the site (requires third-party X2JS plugin)

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

One more note: if you use Angular like me, then someone has already created a good plugin to use: https://github.com/johngeorgewright/angular-xml