JavaScript实现的XML与JSON互转功能详解


Posted in Javascript onFebruary 16, 2017

本文实例讲述了JavaScript实现的XML与JSON互转功能。分享给大家供大家参考,具体如下:

这里来分享一个关于JavaScript实现XML与JSON互转例子,这里面介绍了国外的三款xml转json的例子,希望这些例子能给你带来帮助。

最近在开发在线XML编辑器,打算使用JSON做为中间格式。因为JSON相对于XML,有着容易阅读、解析速度快、占用空间小等优点,更易于在WEB上传递数据。但在实际使用中还是发现了一些易于忽略的细节,对于需要严格保证XML原始结构的情况,在转换成JSON时需要一些注意。

XML转换成JSON的格式大概如下:

XML形式

<article>
<header id="h1"> 文章标题 </header>
<section id="s1">
<header> 章节标题 </header>
<p> 章节段落 </p>
</section>
</article>

JSON表现形式

{
"article": {
"header": {
"#text": "文章标题",
"@id": "h1"
},
"section": {
"@id": "s1",
"header": "章节标题",
"p": "章节段落"
}
}
}

 

用Js将XML转换成JSON的脚本,在网上找了一些现成的脚本,但大都只满足比较简单的情况,都不可以完成保证原始结构的互转。下面是从网上找到的一些脚本或者文章:

x2js  : https://code.google.com/p/x2js/

jsonxml :http://davidwalsh.name/convert-xml-json

JKL.ParseXML :http://www.kawa.net/works/js/jkl/parsexml-e.html

x2js不会将下面的XML正确还原。

//XML形式
<p> <strong>章节</strong>段<em>落</em> </p>

而第2个脚本jsonxml,在上面这种“文本混合标签”的情况下,没有将标签提取出来,而是转换成了下面这种格式。

{"p":"<strong>章节</strong>段<em>落</em>"}}

之后我做了些改动,将它解析成如下格式后,满足了“文本混合标签”可正确还原的情况。

{"p":[{"strong":"章节"},"段",{"em":"落"}]}

另外,形如下面的代码,使用上文提到的脚本进行转换,也会导致无法正确还原的情况。

<article>
  <section id="s1">第一节</section>
  <header id="h1"> 标题 </header>
  <section id="s2">第二节</section>
</article>

同样,在一个标签内,它的子标签出现了大于一次,如果需要记录数据的路径,应该使用数组来保存这个结构。正确的代码应该是:

{
  "article": [ {
  "section": {
  "#text": "第一节",
  "@id": "s1"
  },
  }, {
  "header": {
  "#text": "标题",
  "@id": "h1"
  }
  }, {
  "section": {
  "#text": "第一节",
  "@id": "s2"
  }
  }
  ]
}

jkl.parsexml

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<items>
 <item>
  <zip_cd>10036</zip_cd>
  <us_state>NY</us_state>
  <us_city>New York</us_city>
  <us_dist>Broadway</us_dist>
 </item>
</items>

SAMPLE SCRIPT:

<script type="text/javascript" src="jkl-parsexml.js"></script>
<script><!--
  var url = "zip-e.xml";
  var xml = new JKL.ParseXML( url );
  var data = xml.parse();
  document.write( data["items"]["item"]["us_state"] );
  document.write( data.items.item.us_state );
// --></script>

OUTPUT JSON:

{
 items: {
  item: {
   zip_cd: "1000001"
   us_state: "NY",
   us_city: "New York",
   us_dist: "Broadway",
  }
 }
};

jsonxml

// Changes XML to JSON
function xmlToJson(xml) {
 // Create the return object
 var obj = {};
 if (xml.nodeType == 1) { // element
 // do attributes
 if (xml.attributes.length > 0) {
 obj["@attributes"] = {};
  for (var j = 0; j < xml.attributes.length; j++) {
  var attribute = xml.attributes.item(j);
  obj["@attributes"][attribute.nodeName] = attribute.nodeValue;
  }
 }
 } else if (xml.nodeType == 3) { // text
 obj = xml.nodeValue;
 }
 // do children
 if (xml.hasChildNodes()) {
 for(var i = 0; i < xml.childNodes.length; i++) {
  var item = xml.childNodes.item(i);
  var nodeName = item.nodeName;
  if (typeof(obj[nodeName]) == "undefined") {
  obj[nodeName] = xmlToJson(item);
  } else {
  if (typeof(obj[nodeName].push) == "undefined") {
   var old = obj[nodeName];
   obj[nodeName] = [];
   obj[nodeName].push(old);
  }
  obj[nodeName].push(xmlToJson(item));
  }
 }
 }
 return obj;
};

The major change I needed to implement was using attributes.item(j) instead of the attributes[j] that most of the scripts I found used.  With this function, XML that looks like:

<ALEXA VER="0.9" URL="davidwalsh.name/" HOME="0" AID="=">
 <SD TITLE="A" FLAGS="" HOST="davidwalsh.name">
 <TITLE TEXT="David Walsh Blog :: PHP, MySQL, CSS, Javascript, MooTools, and Everything Else"/>
 <LINKSIN NUM="1102"/>
 <SPEED TEXT="1421" PCT="51"/>
 </SD>
 <SD>
 <POPULARITY URL="davidwalsh.name/" TEXT="7131"/>
 <REACH RANK="5952"/>
 <RANK DELTA="-1648"/>
 </SD>
</ALEXA>

...becomes workable a JavaScript object with the following structure:

{
 "@attributes": {
 AID: "=",
 HOME: 0,
 URL: "davidwalsh.name/",
 VER: "0.9",
 },
 SD = [
 {
  "@attributes": {
  FLAGS: "",
  HOST: "davidwalsh.name",
  TITLE: A
  },
  LINKSIN: {
  "@attributes": {
   NUM: 1102
  }
  },
  SPEED: {
  "@attributes": {
   PCT: 51,
   TEXT: 1421
  }
  },
  TITLE: {
  "@attributes": {
   TEXT: "David Walsh Blog :: PHP, MySQL, CSS, Javascript, MooTools, and Everything Else",
  }
  },
 },
 {
  POPULARITY: {
  "@attributes": {
   TEXT: 7131,
   URL: "davidwalsh.name/"
  }
  },
  RANK: {
  "@attributes": {
   DELTA: "-1648"
  }
  },
  REACH: {
  "@attributes": {
   RANK = 5952
  }
  }
 }
 ]
}

说了半天下面整理了一个例子

function xmlToJson(xml) {
// Create the return object
var obj = {};
if (xml.nodeType == 1) { // element
// do attributes
if (xml.attributes.length > 0) {
obj["@attributes"] = {};
for (var j = 0; j < xml.attributes.length; j++) {
var attribute = xml.attributes.item(j);
obj["@attributes"][attribute.nodeName] = attribute.nodeValue;
}
}
} else if (xml.nodeType == 3) { // text
obj = xml.nodeValue;
}
// do children
if (xml.hasChildNodes()) {
for (var i = 0; i < xml.childNodes.length; i++) {
var item = xml.childNodes.item(i);
var nodeName = item.nodeName;
if (typeof (obj[nodeName]) == "undefined") {
obj[nodeName] = xmlToJson(item);
} else {
if (typeof (obj[nodeName].length) == "undefined") {
var old = obj[nodeName];
obj[nodeName] = [];
obj[nodeName].push(old);
}
obj[nodeName].push(xmlToJson(item));
}
}
}
return obj;
};
Javascript 相关文章推荐
IE6 弹出Iframe层中的文本框“经常”无法获得输入焦点
Dec 27 Javascript
javascript eval(func())使用示例
Dec 05 Javascript
JSuggest自动匹配下拉框使用方法(示例代码)
Dec 27 Javascript
javascript事件冒泡详解和捕获、阻止方法
Apr 12 Javascript
JavaScript监听文本框回车事件并过滤文本框空格的方法
Apr 16 Javascript
AngularJS 中使用Swiper制作滚动图不能滑动的解决方法
Nov 15 Javascript
Vue 配合eiement动态路由,权限验证的方法
Sep 26 Javascript
JS实现简单的抽奖转盘效果示例
Feb 16 Javascript
通过javascript实现段落的收缩与展开
Jun 26 Javascript
JavaScript实现随机点名程序
Mar 25 Javascript
AJAX XMLHttpRequest对象创建使用详解
Aug 20 Javascript
解决nuxt 自定义全局方法,全局属性,全局变量的问题
Nov 05 Javascript
js实现文字无缝向上滚动
Feb 16 #Javascript
node学习记录之搭建web服务器教程
Feb 16 #Javascript
Angular实现跨域(搜索框的下拉列表)
Feb 16 #Javascript
基于Bootstrap 3 JQuery及RegExp的表单验证功能
Feb 16 #Javascript
js模态对话框使用方法详解
Feb 16 #Javascript
javascript获取以及设置光标位置
Feb 16 #Javascript
JavaScript实现翻页功能(附效果图)
Feb 16 #Javascript
You might like
PHP Pear 安装及使用
2009/03/19 PHP
php下载远程大文件(获取远程文件大小)的实例
2017/06/17 PHP
实现php删除链表中重复的结点
2018/09/27 PHP
PHP实现新型冠状病毒疫情实时图的实例
2020/02/04 PHP
javascript hasFocus使用实例
2010/06/29 Javascript
用JS实现一个TreeMenu效果分享
2011/08/28 Javascript
Jquery选中或取消radio示例
2013/09/29 Javascript
jQuery表格排序组件-tablesorter使用示例
2014/05/26 Javascript
jQuery 2.0.3 源码分析之core(一)整体架构
2014/05/27 Javascript
浅谈bootstrap源码分析之scrollspy(滚动侦听)
2016/06/06 Javascript
基于Vuejs和Element的注册插件的编写方法
2017/07/03 Javascript
解决vue中无法动态修改jqgrid组件 url地址的问题
2018/03/01 Javascript
vue项目动态设置页面title及是否缓存页面的问题
2018/11/08 Javascript
JQuery常用选择器功能与用法实例分析
2019/12/23 jQuery
基于redis的小程序登录实现方法流程分析
2020/05/25 Javascript
[47:03]完美世界DOTA2联赛PWL S3 access vs LBZS 第一场 12.20
2020/12/23 DOTA
Python实现PS滤镜Fish lens图像扭曲效果示例
2018/01/29 Python
django 实现编写控制登录和访问权限控制的中间件方法
2019/01/15 Python
Python后台开发Django的教程详解(启动)
2019/04/08 Python
Opencv-Python图像透视变换cv2.warpPerspective的示例
2019/04/11 Python
python输出电脑上所有的串口名的方法
2019/07/02 Python
Python企业编码生成系统之主程序模块设计详解
2019/07/26 Python
Python 中pandas索引切片读取数据缺失数据处理问题
2019/10/09 Python
python 使用pygame工具包实现贪吃蛇游戏(多彩版)
2019/10/30 Python
Python连接Hadoop数据中遇到的各种坑(汇总)
2020/04/14 Python
新建文件时Pycharm中自动设置头部模板信息的方法
2020/04/17 Python
将不规则的Python多维数组拉平到一维的方法实现
2021/01/11 Python
HTML5中外部浏览器唤起微信分享功能的代码
2020/09/15 HTML / CSS
塑料制成的可水洗的编织平底鞋和鞋子:Rothy’s
2018/09/16 全球购物
质检的岗位职责
2013/11/17 职场文书
机电专业大学生职业规划书范文
2014/02/25 职场文书
入党积极分子自我鉴定范文
2014/03/25 职场文书
中学生评语大全
2014/04/18 职场文书
汽车销售经理岗位职责
2014/06/09 职场文书
如何书写先进事迹材料?
2019/07/02 职场文书
Django框架之路由用法
2022/06/10 Python