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 相关文章推荐
JQuery 国际象棋棋盘 实现代码
Jun 26 Javascript
jquery插件之easing使用
Aug 19 Javascript
iframe 异步加载技术及性能分析
Jul 19 Javascript
js对列表中第一个值处理与jsp页面对列表中第一个值处理的区别详解
Nov 05 Javascript
javaScript如何生成xmlhttp
Dec 16 Javascript
JQuery遍历json数组的3种方法
Nov 08 Javascript
用node和express连接mysql实现登录注册的实现代码
Jul 05 Javascript
基于vue cli重构多页面脚手架过程详解
Jan 23 Javascript
javascript对HTML字符转义与反转义
Dec 13 Javascript
详解vue 2.6 中 slot 的新用法
Jul 09 Javascript
js对象简介与基本用法示例
Mar 13 Javascript
vue组件暴露和.js文件暴露接口操作
Aug 11 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 extract 将数组拆分成多个变量的函数
2010/06/30 PHP
Apache服务器无法使用的解决方法
2013/05/08 PHP
Laravel 5.1 框架Blade模板引擎用法实例分析
2020/01/04 PHP
javascript判断iphone/android手机横竖屏模式的函数
2011/12/20 Javascript
js调用AJAX时Get和post的乱码解决方法
2013/06/04 Javascript
javascript仿php的print_r函数输出json数据
2013/09/13 Javascript
网页实时显示服务器时间和javscript自运行时钟
2014/06/09 Javascript
JavaScript地理位置信息API
2016/06/11 Javascript
Jquery和BigFileUpload实现大文件上传及进度条显示
2016/06/27 Javascript
nodejs实现连接mongodb数据库的方法示例
2018/03/15 NodeJs
Vue使用Canvas绘制图片、矩形、线条、文字,下载图片
2019/04/26 Javascript
JS中的算法与数据结构之链表(Linked-list)实例详解
2019/08/20 Javascript
详解JSON.stringify()的5个秘密特性
2020/05/26 Javascript
VUE动态生成word的实现
2020/07/26 Javascript
win7安装python生成随机数代码分享
2013/12/27 Python
python中利用xml.dom模块解析xml的方法教程
2017/05/24 Python
Python实现获取照片拍摄日期并重命名的方法
2017/09/30 Python
Python+tkinter模拟“记住我”自动登录实例代码
2018/01/16 Python
Python OpenCV获取视频的方法
2018/02/28 Python
pyqt 实现在Widgets中显示图片和文字的方法
2019/06/13 Python
pycharm无法安装第三方库的问题及解决方法以scrapy为例(图解)
2020/05/09 Python
详解CSS3媒体查询响应式布局bootstrap 框架原理实战(推荐)
2020/11/16 HTML / CSS
html5需遵循的6个设计原则
2016/04/27 HTML / CSS
Lookfantastic日本官网:英国知名护肤、化妆品和头发护理购物网站
2018/04/21 全球购物
给水排水工程专业毕业生推荐信
2013/10/28 职场文书
怎么写好自荐信
2013/10/30 职场文书
测绘工程专业个人自我评价
2013/12/01 职场文书
高中毕业的自我鉴定
2013/12/09 职场文书
毕业生个人求职自荐信
2014/02/26 职场文书
规划编制实施方案
2014/03/15 职场文书
毕业生自荐信如何写
2014/03/24 职场文书
商铺租房协议书范本
2014/12/04 职场文书
体育教师个人总结
2015/02/09 职场文书
2015年万圣节活动总结
2015/03/24 职场文书
【海涛解说】pis亲自推荐,其实你从来不会玩NW
2022/04/01 DOTA
Android实现图片九宫格
2022/06/28 Java/Android