Convert XML Data to Json Format AngularJS

Question

I am trying to use Treeview directive from AngularJS. The stored procedure is returning xml.The tree view directive takes json format. The Controller will get the data from service.I am stuck trying to convert xml to json in service.

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: [

                    ]
                  }
                ]
              }
            ]
          }
        ]
      }
    ]

Are you asking how to convert XML to JSON using javascript? – rdjs Dec 18 '13 at 17:26 — rdjs, Dec 18 '13 at 17:26
I want to convert the xml to the specified Json format. – user3083626 Dec 19 '13 at 03:34 — user3083626, Dec 19 '13 at 03:34

score 5 · Answer 1 · edited May 23 '17 at 12:34

5

You have two choices:

Return the data from the API in the JSON format you require
Convert the XML to JSON in your angular application using javascript.

I would recommend option 1 if that is possible. For option 2 take a look at this question which disucsses XML/JSON conversion in Javascript "Convert XML to JSON (and back) using Javascript"

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

edited May 23 '17 at 12:34

Community

1
1

answered Dec 19 '13 at 13:29

rdjs

594
2
18

Thanks a lot.I am getting the xml from .edmx. The stored procedure is returning the xml. Yes, The second option is complicated.Should i convert the xml to json in the .cs file, which is calling the stored procedure?What do you suggest? – user3083626 Dec 20 '13 at 05:32
I don't know anything about .edmx files. It looks like you are using c#. Here is a SO answer for xml to json in c# http://stackoverflow.com/questions/814001/json-net-convert-json-string-to-xml-or-xml-to-json-string – rdjs Dec 20 '13 at 07:45
Thanks. I tried to implement. Json , AngularJS are new to me.It is using static class JsonConvert to convert from xml to Json. So it is under which namespace.Which Directive or assembly reference do i need to add? – user3083626 Dec 20 '13 at 08:11
That question would be better asked on the question I linked to. – rdjs Dec 20 '13 at 08:51

score 1 · Answer 2 · answered Jun 09 '14 at 18:25

If you have JQuery available in that page you can convert the XML into a DOM object by doing var data = jQuery(data);. Then, use jQuery selectors to extract the data you need out of it.

Some examples:

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

// Extract a node's value:
$scope.event.title = jQuery('title', data).text();

score 1 · Answer 3 · answered May 16 '16 at 18:12

A little late but I am also having to look at this option since I will be working with a CMS that only parses into XML. Which at this stage of the game I have no clue why... but I digress.

Found this on D-Zone and it seems to have potential: https://dzone.com/articles/convert-xml-to-json-in-angular-js

Basically, you make the request to get the XML, then convert it to JSON within another function. Granted you are still pulling XML data but you will be able to work with JSON which will save you a lot of time.

EX from Site (Requires 3rd party Plugin X2JS)

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 are using Angular like me then someone has already created a nice plugin service to use: https://github.com/johngeorgewright/angular-xml

Convert XML Data to Json Format AngularJS

3 Answers3

Linked