在 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页面。


 
 
  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4.     <title>Convert XML to JSON In Angular JS - SibeeshPassion </title> 
  5. </head> 
  6. <body> 
  7. </body> 
  8. </html> 

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


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

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

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


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

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


 
 
  1. var app = angular.module('httpApp', []); 
  2. app.controller('httpController', function ($scope, $http) { 
  3.   $http.get("Sitemap.xml"
  4.             { 
  5.     transformResponse: function (cnv) { 
  6.       var x2js = new X2JS(); 
  7.       var aftCnv = x2js.xml_str2json(cnv); 
  8.       return aftCnv; 
  9.     } 
  10.   }) 
  11.     .success(function (response) { 
  12.     console.log(response); 
  13.   }); 
  14. }); 

这里的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!

结论

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


作者:小峰

来源:51CTO

相关文章
|
2月前
|
XML 存储 JSON
Twaver-HTML5基础学习(19)数据容器(2)_数据序列化_XML、Json
本文介绍了Twaver HTML5中的数据序列化,包括XML和JSON格式的序列化与反序列化方法。文章通过示例代码展示了如何将DataBox中的数据序列化为XML和JSON字符串,以及如何从这些字符串中反序列化数据,重建DataBox中的对象。此外,还提到了用户自定义属性的序列化注册方法。
47 1
|
3月前
|
XML JSON 前端开发
【Web前端揭秘】XML与JSON:数据界的双雄对决,你的选择将如何改写Web世界的未来?
【8月更文挑战第26天】本文深入探讨了XML和JSON这两种广泛使用的数据交换格式在Web前端开发中的应用。XML采用自定义标签描述数据结构,适用于复杂层次数据的表示,而JSON则以键值对形式呈现数据,更为轻量且易解析。通过对两种格式的示例代码、结构特点及应用场景的分析,本文旨在帮助读者更好地理解它们的差异,并根据实际需求选择最合适的数据交换格式。
61 1
|
2月前
|
XML JSON 数据处理
C# 中的 XML 与 JSON 数据处理
在现代软件开发中,数据交换和存储需求日益增长,XML 和 JSON 成为最常用的数据格式。本文从 C# 角度出发,详细介绍如何处理这两种格式,并提供示例代码。对于 XML,我们介绍了读取、创建和写入 XML 文件的方法;对于 JSON,则展示了如何使用 Newtonsoft.Json 库进行数据解析和序列化。此外,文章还总结了常见问题及其解决方案,帮助开发者更好地应对实际项目中的挑战。
180 61
C# 中的 XML 与 JSON 数据处理
|
1月前
|
XML JSON 数据可视化
数据集学习笔记(二): 转换不同类型的数据集用于模型训练(XML、VOC、YOLO、COCO、JSON、PNG)
本文详细介绍了不同数据集格式之间的转换方法,包括YOLO、VOC、COCO、JSON、TXT和PNG等格式,以及如何可视化验证数据集。
88 1
数据集学习笔记(二): 转换不同类型的数据集用于模型训练(XML、VOC、YOLO、COCO、JSON、PNG)
|
6月前
|
XML JSON 前端开发
基于若依的ruoyi-nbcio流程管理系统仿钉钉流程json转bpmn的flowable的xml格式(支持并行网关)
基于若依的ruoyi-nbcio流程管理系统仿钉钉流程json转bpmn的flowable的xml格式(支持并行网关)
347 3
|
1月前
|
XML JSON 前端开发
C#使用HttpClient四种请求数据格式:json、表单数据、文件上传、xml格式
C#使用HttpClient四种请求数据格式:json、表单数据、文件上传、xml格式
377 0
|
3月前
|
XML JSON Java
使用IDEA+Maven搭建整合一个Struts2+Spring4+Hibernate4项目,混合使用传统Xml与@注解,返回JSP视图或JSON数据,快来给你的SSH老项目翻新一下吧
本文介绍了如何使用IntelliJ IDEA和Maven搭建一个整合了Struts2、Spring4、Hibernate4的J2EE项目,并配置了项目目录结构、web.xml、welcome.jsp以及多个JSP页面,用于刷新和学习传统的SSH框架。
92 0
使用IDEA+Maven搭建整合一个Struts2+Spring4+Hibernate4项目,混合使用传统Xml与@注解,返回JSP视图或JSON数据,快来给你的SSH老项目翻新一下吧
|
3月前
|
Java Spring 容器
彻底改变你的编程人生!揭秘 Spring 框架依赖注入的神奇魔力,让你的代码瞬间焕然一新!
【8月更文挑战第31天】本文介绍 Spring 框架中的依赖注入(DI),一种降低代码耦合度的设计模式。通过 Spring 的 DI 容器,开发者可专注业务逻辑而非依赖管理。文中详细解释了 DI 的基本概念及其实现方式,如构造器注入、字段注入与 setter 方法注入,并提供示例说明如何在实际项目中应用这些技术。通过 Spring 的 @Configuration 和 @Bean 注解,可轻松定义与管理应用中的组件及其依赖关系,实现更简洁、易维护的代码结构。
52 0
|
6月前
|
XML JSON 前端开发
基于若依的ruoyi-nbcio流程管理系统仿钉钉流程json转bpmn的flowable的xml格式(排它条件网关)
基于若依的ruoyi-nbcio流程管理系统仿钉钉流程json转bpmn的flowable的xml格式(排它条件网关)
115 3
基于若依的ruoyi-nbcio流程管理系统仿钉钉流程json转bpmn的flowable的xml格式(排它条件网关)
|
4月前
|
XML JSON 缓存
优化Java中XML和JSON序列化
优化Java中XML和JSON序列化
下一篇
无影云桌面