将XML数据转换为Json格式的AngularJS

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.

我正在尝试使用来自AngularJS的Treeview指令。存储过程正在返回xml。树视图指令采用json格式。控制器将从服务中获取数据。我正试图在服务中将xml转换为json。

Following is the xml structure:

xml结构如下:

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

下面是预期的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: [

                    ]
                  }
                ]
              }
            ]
          }
        ]
      }
    ]

3 个解决方案

#1

You have two choices:

你有两个选择:

Return the data from the API in the JSON format you require
以所需的JSON格式返回API中的数据
Convert the XML to JSON in your angular application using javascript.
使用javascript将XML转换为JSON。

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"

如果可能的话，我建议选择1。对于选项2，看看这个问题，它在Javascript中破坏了XML/JSON的转换，“使用Javascript将XML转换成JSON(并返回)”

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

如果您阅读以上链接上的答案，您将看到为什么选项1更可取。在这些格式之间进行转换可能会有问题。

#2

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.

如果在该页中有JQuery，可以通过执行var data = JQuery (data)将XML转换为DOM对象;然后，使用jQuery选择器提取所需的数据。

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

#3

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.

有点晚了，但我也不得不考虑这个选项，因为我将使用一个只能解析成XML的CMS。在游戏的这个阶段，我不知道为什么……但我离题了。

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

在D-Zone上找到它，它似乎有潜力:https://dzone.com/articles/convertxml -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.

基本上，您请求获取XML，然后在另一个函数中将其转换为JSON。假定您仍在提取XML数据，但您将能够使用JSON，这将节省大量时间。

EX from Site (Requires 3rd party Plugin X2JS)

来自网站的EX(需要第三方插件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

还有一点，如果你使用像我这样的角度，有人已经创建了一个很好的插件服务:https://github.com/johngeorgewright/angular-xml。

#1