转换Json到XML的JavaScript实现

简介:

背景

由于本人编写的Mobile Radio项目电台信息以XML格式来保存,那些电台配置信息来自于 www.1radio.com.au 网站,该网站把配置数据保存为Json格式,所以编写一个JavaScript程序把这些配置数据信息从Json转换为XML格式。

Mobile Radio项目可以参考:

Windows Mobile和Wince下的WTL(Windows Template Library)开发

Windows Mobile 和 Wince 下的 WTL(Windows Template Library) 界面开发

Windows Mobile和Wince下使用WTL进行Windows Media Player开发

简介

Json数据由于其轻装,易读和方便操作等优点已经被广泛应用于网络服务数据传输。本文从一个实例讲述如何把Json数据转换成XML格式。使用了JavaScript实现。

实现

 郭靖winter-cn 和 Tim 同学的帮助下使用JavaScript来实现。

Json数据

下面为来自于 www.1radio.com.au 网站的原Json数据,保存电台信息。关于Json的介绍可以看http://json.org/

 

ContractedBlock.gif Code

排序

由于源数据无序排列,第一步需要进行排序,JavaScript的数组排序(Array.prototype.sort)支持指定排序算法。所以我编写了自己的排序算法,根据我的需求排序,我的排序逻辑是国家,州,城市,lonname的顺序进行排序,代码如下:

function JsonSort(a, b) {
if (a.country == b.country) {
if (a.state == b.state) {
if (a.city == b.city) {
return (a.logname > b.logname);
}
else {
return (a.city > b.city);
}
}
else {
return (a.state > b.state);
}
}
else {
return (a.country > b.country);
}
}

有了排序算法,在排序时只有指导排序算法就可以了。

stations.sort(JsonSort);

执行后stations就排列成我们需要的顺序,为转换做准备。

转换

转换过程就是把已经排序的数组数据整理成需要的XML格式。我需要的XML格式比较简单,就是Stations->City->Station三层。这里使用DOM来生成XML结构,DOM的介绍看 Document Object Model

var stationsNode = document.createElement("Stations");
var city = null;
for (var i=0; i < stations.length; ++i) {
if (stations[i].city != city) {
city = stations[i].city;
var cityNode = document.createElement("City");
cityNode.setAttribute("name", city);
stationsNode.appendChild(cityNode);
}
var stationNode = document.createElement("Station");
stationNode.setAttribute("sid", stations[i].sid);
stationNode.setAttribute("logname", stations[i].logname);
stationNode.setAttribute("name", stations[i].name);
stationNode.setAttribute("website", stations[i].website);
stationNode.setAttribute("image", stations[i].image);
stationNode.setAttribute("stream", stations[i].stream);
cityNode.appendChild(stationNode);
}

//var xml = CreateXmlDoc("", "XML");
var xml = document.createElement("XML");
xml.appendChild(stationsNode);

document.createElement()函数生成节点,setAttribute()函数设置节点的属性,appendChild()还是把节点添加到父节点中。

显示

其实上面是转换过程已经完成了XML生成的全部操作,可是XML不能直接显示在HTML中,所以需要对生成的XML进行修改来正常显示。

var str = xml.innerHTML;
var str2 = "";
var level = 0;
for (i = 0; i < str.length; ++i) {
if (str[i] == "<") {
if (str[i + 1] == "/") {
--level;
for (j = 0; j < level; ++j) {
str2 += "&nbsp;";
}
}
else {
for (j = 0; j < level; ++j) {
str2 += "&nbsp;";
}
++level;
}
str2 += "&lt;";
}
else if (str[i] == ">") {
str2 += "&gt;<br />";
}
else {
str2 += str[i];
}
}

把大于号和小于号进行替换,同时根据层次显示缩进。

结果

把结果显示到HTML中。

<html>
<
head>
<
title>Json to Xml</title>
</
head>
<
body>
<
pre title="Result" id="Result">
</
pre>
</
body>
</
html>

 

var result = document.getElementById("Result");
result.innerHTML = str2;

 

ContractedBlock.gif Code

 

总结

进行Json到XML转换的开发,需要先定义出转换后的XML的格式,然后根据该格式对Json数据进行排序,把排序后的数据转换到DOM的XML结构里,最后转换显示格式进行显示。

下一篇回到C++, tinyXML。

源码:JsonToXml.htm

环境: Firefox 3.5 + FireBug 1.4 


关于Mobile Radio - Internet Radio Software for Windows Mobile项目

 

目前(2009年9月份)这个项目基本功能已经完成,只是界面方面需要改进,提高用户体验。我把项目host到 Mobile Radio - Internet Radio Software for Windows Mobile 了,我会持续改进,主要是提高用户体验方面。

需要了解项目最新动态,可以访问 Mobile Radio - Internet Radio Software for Windows Mobile  和我的Blog  精简开发 无线生活

 

源代码: 查看Mobile Radio最新源代码

环境:VS2008 + WM 6 professional SDK + WTL 8.1 + TinyXML




    本文转自Jake Lin博客园博客,原文链接:http://www.cnblogs.com/procoder/archive/2009/07/10/1520467.html,如需转载请自行联系原作者


相关文章
|
11天前
|
XML 存储 JSON
Twaver-HTML5基础学习(19)数据容器(2)_数据序列化_XML、Json
本文介绍了Twaver HTML5中的数据序列化,包括XML和JSON格式的序列化与反序列化方法。文章通过示例代码展示了如何将DataBox中的数据序列化为XML和JSON字符串,以及如何从这些字符串中反序列化数据,重建DataBox中的对象。此外,还提到了用户自定义属性的序列化注册方法。
27 1
|
2月前
|
XML JSON 前端开发
【Web前端揭秘】XML与JSON:数据界的双雄对决,你的选择将如何改写Web世界的未来?
【8月更文挑战第26天】本文深入探讨了XML和JSON这两种广泛使用的数据交换格式在Web前端开发中的应用。XML采用自定义标签描述数据结构,适用于复杂层次数据的表示,而JSON则以键值对形式呈现数据,更为轻量且易解析。通过对两种格式的示例代码、结构特点及应用场景的分析,本文旨在帮助读者更好地理解它们的差异,并根据实际需求选择最合适的数据交换格式。
49 1
|
11天前
|
XML JSON 数据处理
C# 中的 XML 与 JSON 数据处理
在现代软件开发中,数据交换和存储需求日益增长,XML 和 JSON 成为最常用的数据格式。本文从 C# 角度出发,详细介绍如何处理这两种格式,并提供示例代码。对于 XML,我们介绍了读取、创建和写入 XML 文件的方法;对于 JSON,则展示了如何使用 Newtonsoft.Json 库进行数据解析和序列化。此外,文章还总结了常见问题及其解决方案,帮助开发者更好地应对实际项目中的挑战。
156 61
C# 中的 XML 与 JSON 数据处理
|
2月前
|
JSON JavaScript 前端开发
JavaScript实现字符串转json对象的方法
JavaScript实现字符串转json对象的方法
|
9天前
|
存储 JSON JavaScript
js中JSON的使用
介绍JSON的基本概念和在JavaScript中的使用方式,包括JSON格式的语法规则、使用`JSON.stringify()`和`JSON.parse()`方法进行对象与字符串的转换,以及处理JSON数组数据。
js中JSON的使用
|
3天前
|
JSON JavaScript 前端开发
js如何格式化一个JSON对象?
js如何格式化一个JSON对象?
10 3
|
9天前
|
XML JSON JavaScript
js的json格式
js的json格式
|
16天前
|
存储 JSON JavaScript
JavaScript JSON
JavaScript JSON
30 5
|
2月前
|
JSON JavaScript 前端开发
JavaScript JSON
JavaScript JSON
|
2月前
|
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框架。
36 0
使用IDEA+Maven搭建整合一个Struts2+Spring4+Hibernate4项目,混合使用传统Xml与@注解,返回JSP视图或JSON数据,快来给你的SSH老项目翻新一下吧