在AngularJS中将XML转换为JSON

佚名 2015-11-24 12:05:09

本文由玩赚乐(www.banghui.org)– 小峰原创翻译，转载请看清文末的转载要求，欢迎加入技术翻译小组！

在这篇文章中，我们将谈谈如何在Angular JS中将XML文件转换为JSON。大家都知道AngularJS是开发应用程序的JavaScript框架。所以基本上AngularJS期望得到的响应式JSON格式的。因此，在你开始对数据进行操作之前，建议返回JSON格式的数据。在这篇文章中，我们会使用AngularJS $http服务加载一个本地的XML文件，并将这个XML文件转换成JSON。如果你是Angular JS新手，请阅读《AngularJS》。希望你会喜欢这篇文章。

背景

我曾发表过一篇有关于AngularJS $http服务的文章：《$http Service In Angular JS》

源代码

预告源代码： XML to JSON Source Code

使用代码

首先创建一个HTML页面。

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

现在，如下添加所需的引用。

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

你注意到了吗，我已经添加了xml2json.js文件？这就是将要转换的文件。你可以从https://code.google.com/p/x2js/预告文件。

现在创建一个控制器和应用程序指令，如下所示。

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

接下来我们需要做的是添加服务。你可以按如下方式添加$http服务。

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

这里的httpApp是我们的应用程序，httpController是我们的控制器。我们使用函数transformResponse转换响应。

转换请求和响应

在Angular JS中，请求可以使用transformRequest函数转换，如果是响应的话，可以通过函数transformResponse转换。这些函数返回转换后的值。

下面是我们使用transformResponse函数的一个例子。

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

这个x2js.xml_str2json（CNV）将返回JSON对象，并从transformResponse函数返回aftCnv。听起来不错吧？一旦准备就绪，我们只要在浏览器控制台写JSON对象，就可以看到该对象了。

输出

在Angular JS中转换XML为JSON，就是这么简单。祝大家Happy coding！

结论

欢迎大家的火眼金睛。如果我有什么遗漏或写错的地方，请不吝指正。希望大家能够喜欢这篇文章。

译文链接：
英文原文：Convert XML to JSON In Angular JS
翻译作者：玩赚乐(www.banghui.org)– 小峰
[转载必须在正文中标注并保留原文链接、译文链接和译者等信息。]

I 相关 / Other

在Linux/Unix中文本处理方式总结

正则表达式翻译领域不乏让人摸不着头脑的词汇，比如“句柄”、“套接字”、“鲁棒性”。当然，“正则表达式

Redis分布式锁与任务队列实战

这一次总结和分享用Redis实现分布式锁与实现任务队列这两大强大的功能。先扯点个人观点，之前我看了一篇

索尼计划在PS4上兼容PS2的游戏，还是为了卖设备

对于主机游戏玩家说，比买不起游戏机更痛苦的是买不起游戏。比如买了一大堆 PS 2 游戏盘之后，看着 PlaySt

今日应用：这个奇特的跑酷游戏，你必须真的“跳”起来玩

NFL Play 60 是 NFL （美国橄榄球联盟）和美国心脏协会一起开发的游戏，主要目的还是为了让你动起来它的操

毛绒绒的朋友们，是它们使劲卖萌征服了今年的社交网络

先来看看这支预告片广告 Friends Furever：永远的毛友。你可能还不知道，这支发表于今年 2 月的预告片，是

I 相关 / Other

I 热点 / Hot