在 AngularJS 中将 XML 转换为 JSON
在这篇文章中，我们将谈谈如何在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的更多相关文章
- struts2：JSON在struts中的应用（JSP页面中将对象转换为JSON字符串提交、JSP页面中获取后台Response返回的JSON对象）
JSON主要创建如下两种数据对象: 由JSON格式字符串创建,转换成JavaScript的Object对象: 由JSON格式字符串创建,转换成JavaScript的List或数组链表对象. 更多关于J ...
- xml转换为json格式时，如何将指定节点转换成数组 Json.NET
使用Json.NET转换xml成json时,如果xml只有单个节点,但json要求是数组形式[], JsonConvert.SerializeXmlNode 并不能自动识别 示例如下: RecordA ...
- 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 ...
- 将XML转换为JSON并强制数组
string xml = @"<person id='1'> <name>Alan</name> <url>http://www.google ...
- json.net xml转换为json格式时，如何将指定节点转换成数组
using System.Xml.Linq; using Newtonsoft.Json; Response.ContentType = "application/json"; X ...
- JS中将XML转为JSON对象
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script> <scr ...
- angularJs中将字符串转换为HTML格式
首先定义一个filter: .filter( 'to_trusted', ['$sce', function ($sce) { return function (text) { return $sce ...
- C# XML转JSON，不引用第三方JSON.NET类库
应用场景:需要调用第三方接口(返回XML)数据,然后供自己多个系统使用(涉及跨域,使用JSONP) 代理:调用接口(把XML转换为JSONP解决跨域问题) B/S应用系统:调用代理返回的数据进行UI显 ...
- C# XML与Json之间相互转换实例详解
对于这转换其实很简单,其中最重要的就是先要引用类库.可以到官网进行下载引用http://json.codeplex.com. XML转换为Json字符串 string xml = @"< ...
随机推荐
- 基于JAVA语言的多线程技术
1.简介 多线程技术属于操作系统范围内的知识: 进程与线程 可以这么理解,一个应用程序就是一个进程,在一个进程中包含至少一个线程:进程就是线程的容器,真正工作.处理任务的是线程. 进程是操作系统分配资 ...
- angular 实现modal windows效果（即模态窗口，半透明的遮罩层），以及bootstrap(css,components,js)的初步学习
废话不说,直接上代码.可直接看效果,对着分析..今天算是bootstrap 入门了,开心.. 突然居然很多事情就是那样,不要太多的畏惧,迈出第一步其实就成功了一半了. <html ng-app= ...
- 引入bootstrap
下载bootstrap的min.css文件,下载地址为:http://www.bootcss.com/ 你也可以去bootstrap中文站上去下载和学习: http://v3.bootcss.com/ ...
- python之路：进阶 二
c = collections.Counter( Counter({ b = collections.Counter( b.update(c) Counter({ Counter({ ...
- 计算机学院大学生程序设计竞赛（2015’12） 1004 Happy Value
#include<cstdio> #include<cstring> #include<cmath> #include<vector> #include ...
- php中var_dump() 打印出一个对象的时候，信息怎么看？
php 的一个依赖注入容器, 说白了,就是用php 的反射类,来在运行的时候动态的分析类具有的函数,以及动态分析函数的参数, 从而实例化类,并执行类的方法. 另外,php 中的 typehint 还是 ...
- mrql初级教程-概念、使用（一）
以下是本人原创,如若转载和使用请注明转载地址.本博客信息切勿用于商业,可以个人使用,若喜欢我的博客,请关注我,谢谢!博客地址 感谢您支持我的博客,我的动力是您的支持和关注!如若转载和使用请注明转载地址 ...
- openstack controller ha测试环境搭建记录（五）——配置rabbitmq集群
配置rabbitmq集群的步骤非常简单,因为其本身含集群功能,参考openstack官网文档:http://docs.openstack.org/ha-guide/controller-ha-rabb ...
- PHP学习笔记-1——快捷键
整行删除 ctrl+E set get 生成 alt+ insert 查找.搜索和替换 Ctrl-F3 搜索位于插入点的词 F3/Shift-F3 在文件中查找下一个/上一个 Ctrl-F/H 在文件 ...
- IE去掉input的type=”text”输入内容时出现的X和type=”password”出现的眼睛图标
从IE 10开始,type=”text” 的 input 在用户输入内容后,会自动产生一个小叉叉(X),方便用户点击清除已经输入的文本.对于type=”password”的 input 则会在右方显示 ...