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

背景

我曾发表过一篇有关于Angular JS $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/下载文件。

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

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

接下来我们需要做的是添加服务。你可以按如下方式添加$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!

在 AngularJS 中将 XML 转换为 JSON的更多相关文章

  1. struts2:JSON在struts中的应用(JSP页面中将对象转换为JSON字符串提交、JSP页面中获取后台Response返回的JSON对象)

    JSON主要创建如下两种数据对象: 由JSON格式字符串创建,转换成JavaScript的Object对象: 由JSON格式字符串创建,转换成JavaScript的List或数组链表对象. 更多关于J ...

  2. xml转换为json格式时,如何将指定节点转换成数组 Json.NET

    使用Json.NET转换xml成json时,如果xml只有单个节点,但json要求是数组形式[], JsonConvert.SerializeXmlNode 并不能自动识别 示例如下: RecordA ...

  3. java 中xml转换为json对象

    1.前提须要jar包: json-lib-2.4-jdk15.jar 和 xom-1.2.5.jar ,maven 仓库: net.sf.json-lib json-lib 2.4 jdk15 xom ...

  4. 将XML转换为JSON并强制数组

    string xml = @"<person id='1'> <name>Alan</name> <url>http://www.google ...

  5. json.net xml转换为json格式时,如何将指定节点转换成数组

    using System.Xml.Linq; using Newtonsoft.Json; Response.ContentType = "application/json"; X ...

  6. JS中将XML转为JSON对象

    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script> <scr ...

  7. angularJs中将字符串转换为HTML格式

    首先定义一个filter: .filter( 'to_trusted', ['$sce', function ($sce) { return function (text) { return $sce ...

  8. C# XML转JSON,不引用第三方JSON.NET类库

    应用场景:需要调用第三方接口(返回XML)数据,然后供自己多个系统使用(涉及跨域,使用JSONP) 代理:调用接口(把XML转换为JSONP解决跨域问题) B/S应用系统:调用代理返回的数据进行UI显 ...

  9. C# XML与Json之间相互转换实例详解

    对于这转换其实很简单,其中最重要的就是先要引用类库.可以到官网进行下载引用http://json.codeplex.com. XML转换为Json字符串 string xml = @"< ...

随机推荐

  1. 2016大连网络赛 Different GCD Subarray Query

    Different GCD Subarray Query Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 65536/65536 K ( ...

  2. linux下的安装百度云网盘

    linux下的百度网盘 (2014-10-20 18:01:14) 标签: linux 百度网盘 网盘 百度 forlinux 分类: 技术博文 百度网盘说实话,其实我挺喜欢的,好处什么的,就不说了, ...

  3. 伸展树 Splay 模板

    学习Splay的时候参考了很多不同的资料,然而参考资料太杂的后果就是模板调出来一直都有问题,尤其是最后发现网上找的各种资料均有不同程度的错误. 好在啃了几天之后终于算是啃下来了. Splay也算是平衡 ...

  4. jQuery 查找带有某一属性的元素

    $('*[name="username"]') 要在前面加个*表示所有的DOM,如果只是查找带有name属性的DOM的话则是这样的   $('*[name]')//其实, $('[ ...

  5. 【HighCharts系列教程】六、去除highCharts版权信息的几种方法

    方法一:单个图表去除版权 设置Credits属性为不可用,也就是credits中enable=false,具体代码如下 <script type="text/javascript&qu ...

  6. python2.7 与 go1.2简单性能比较

    过完年刚上班,项目还没有开始,对于即将到来的项目,想尝试是否可以找到一个开发效率接近python,运行效率接近静态语言的编程语言,选择基本就是scala和go,公司的技术组成基本都是c派的,scala ...

  7. 【poj解题】1308

    判断一个图是否是一个树,树满足一下2个条件即可:1. 边树比node数少12. 所有node的入度非0即1 节点数是0的时候,空树,合法树~ 代码如下 #include <stdio.h> ...

  8. [算法] aov图拓扑算法

    #include <stdio.h> #include <string.h> #include <stdlib.h> #include <queue> ...

  9. libthread_db

    http://timetobleed.com/notes-about-an-odd-esoteric-yet-incredibly-useful-library-libthread_db/

  10. 类似java.lang.NoClassDefFoundError: org/jaxen/JaxenException解决方法

    在使用dom4j的xpath时出现java.lang.NoClassDefFoundError: org/jaxen/JaxenException的异常,原因是dom4j引用了jaxen jar包,而 ...