在 AngularJS 中将 XML 转换为 JSON

开发 前端
在这篇文章中,我们将谈谈如何在Angular JS中将XML文件转换为JSON。大家都知道Angular JS是开发应用程序的JavaScript框架。所以基本上Angular JS期望得 到的响应式JSON格式的。因此,在你开始对数据进行操作之前,建议返回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!

结论

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

译文链接:http://www.codeceo.com/article/angularjs-xml-to-json.html
英文原文:Convert XML to JSON In Angular JS

 

责任编辑:王雪燕 来源: 码农网
相关推荐

2010-01-07 15:41:58

XML转换为JSON

2020-04-06 20:30:37

JavaScriptBoolean开发

2021-06-07 12:20:14

LinuxASCII命令

2022-12-25 16:15:38

HTMLJava可视化文档

2022-09-22 11:40:11

JavaScript数组开发

2024-03-12 07:35:39

Python字符串列表

2021-12-29 07:56:32

Go byte io.Reader

2022-12-25 15:56:30

JavaScript字符串

2016-11-15 14:29:14

Linux文件编码转换

2019-08-21 13:30:25

Node.jsSVG前端

2009-08-13 09:33:07

JavaBean到XM

2020-10-22 08:01:52

XMLJSON转换

2024-02-19 15:38:08

JsonPython字符串

2024-03-26 06:53:41

Python元组转换JSON对象

2024-01-04 09:17:03

前端开发CSV 格式JSON 字符串

2016-12-14 09:07:54

日期转换中文

2021-12-29 16:40:54

Python语言字符串

2010-10-27 13:25:33

Oracle查询

2009-06-23 14:22:00

DOM文档XML文件Java

2021-03-28 07:53:05

LinuxWindows虚拟机
点赞
收藏

51CTO技术栈公众号