转换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/

 

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;

 

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

posted @ 2009-07-10 13:05  Jake Lin  阅读(5175)  评论(18)  编辑  收藏  举报