在保持代码工作的同时将xml转换为json
提问于 2015-08-07 02:52:45
我有一个xml文件，以及一个与它相关的html文件。html文件接受xml元素，并输出包含每个节点类型的具有超链接和图片的树。如何将代码转换为JSON而不是XML。这是代码和xml
我为attr元素添加了一个函数，所以当我单击该函数时，它会打开一个表：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$.ajax({
url: "converted14.json",
dataType: 'json',
success: function(tree) {
traverse($('#treeView'), tree)
$('#treeView li:has(li)').addClass("Max").click(function(e) {
$(this).toggleClass("Max Min");
$(this).children("ul").toggle();
e.stopPropagation();
})
$("[href]").addClass("Blue").click(function(e){
$(this).toggleClass("Purple");
e.stopPropagation();
window.location.href = $(this).attr("href")
})
$('#treeView li').click(function(g) {
var mytree2 = $(this);
mytree2.children('li').toggle();
g.stopPropagation();
})
}
})
});
function traverse(node, o) {
for (var i in o) {
if(i == "__text" || i == "_href" || i == "_attr")
continue;
if (o[i] !== null && typeof(o[i])=="object") {
if(o[i].__text){
var ul = $("<ul>").appendTo(node)
var node=$('<li>').appendTo(ul)
if(o[i]._href){
var n = $("<span>").appendTo(node)
$(n).text(o[i].__text).attr("href", o[i]._href)
}
else{
$(node).text(o[i].__text)
}
if(o[i]._attr){
var n = $("<span>").appendTo(node)
$(n).text(o[i]._attr)
$(n).hide()
$(n).parent().click(function(g){
$(n).toggle().addClass("Table")
})
}
}
traverse(node,o[i]);
}
else{
var ul = $("<ul>").appendTo(node)
if(o[i].__text){
var li = $('<li>' + o[i].__text + '<\/li>').appendTo(ul)
if(o[i]._href){
var n = $("<span>").appendTo(node)
$(n).text(o[i].__text).attr("href", o[i]._href)
}
}else{
$('<li>' + o[i] + '</li>').appendTo(ul)
}
}
}
}
</script>
<style type="text/css">
#treeView li {
list-style: none;
}
#treeView ul {
padding-left: 1em;
}
#treeView b {
padding-right: 1em;
}
.Min {
background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/plus_zps8o4adn0e.gif") no-repeat;
padding-left: 15px;
}
.Blue {
text-decoration: underline;
color: Blue;
}
.Purple {
text-decoration: underline;
color: Purple;
}
.Max {
background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/minus_zpsk0jlvbaa.gif") no-repeat;
padding-left: 15px;
}
li {
background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/bullet_zpsblghj3ip.gif") no-repeat;
padding-left: 15px;
}
.Table {
background-color : yellow;
border: 1px solid black;
border-collapse: collapse;
width: 300px;
height: 100px;
padding: 50px;
box-sizing: border-box;
position: absolute;
right: 100px;
top: 50px;
}
.MainStation.Max {
background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/station_zpswxz6gpqe.jpg") no-repeat;
background-size: 15px 15px;
cursor: pointer;
padding-left: 15px;
}
.Substation.Max {
background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/sub_zpsspl8dckt.jpg") no-repeat;
background-size: 15px 15px;
cursor: pointer;
padding-left: 15px;
}
.ControlExpandable.Max {
background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/control_zpsrfvdzyzp.jpg") no-repeat;
background-size: 15px 15px;
cursor: pointer;
padding-left: 15px;
}
.PushButtonExpandable.Max {
background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/pusbutton_zpsspjfsfsp.jpg") no-repeat;
background-size: 15px 15px;
cursor: pointer;
padding-left: 15px;
}
.Control {
background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/control_zpsrfvdzyzp.jpg") no-repeat;
background-size: 15px 15px;
cursor: pointer;
padding-left: 15px;
}
.PushButton {
background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/pusbutton_zpsspjfsfsp.jpg") no-repeat;
background-size: 15px 15px;
cursor: pointer;
padding-left: 15px;
}
.ElectricStation.Max {
background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/electrical-safety-symbol_zpssdvscba0.gif") no-repeat;
background-size: 15px 15px;
cursor: pointer;
padding-left: 15px;
}
</style>
<title>treeView</title>
</head>
<body>
<div id="treeView">
</div>
</body>
</html>这又是json文件。只添加一行以测试该attr：
{
"MAIN": {
"MainStation": [
{
"Substation": [
{
"Control": "Control1\n",
"ControlExpandable": {
"MiniControl": [
"MiniControl1",
"MiniControl2"
],
"__text": "Control2"
},
"PushButton": {
"__text": "PushButton1",
"_attr": "success\nDate:17july"
},
"_href": "http://google.com",
"__text": " Substation1\n\n\n\n\n\n\n"
},
{
"ControlExpandable": {
"MiniControl": [
"MiniControl1",
"MiniControl2"
],
"__text": "Control1"
},
"Control": "Control2",
"PushButton": "PushButton1",
"__text": " Substation2\n\n\n\n\n\n\n"
},
{
"Control": [
"Control1",
"Control2",
"Control3",
"Control4"
],
"__text": " Substation3\n\n\n\n\n\n\n\n\n"
},
{
"PushButton": [
"PushButton1",
"PushButton2"
],
"__text": " Substation4\n\n\n\n\n"
}
],
"__text": " Mainstation1\n\n\n\n\n\n\n\n\n"
},
{
"Substation": [
{
"Control": [
"Control1",
"Control2"
],
"PushButton": "PushButton1",
"__text": " Substation1\n\n\n\n\n\n\n"
},
{
"ControlExpandable": {
"MiniControl": [
"MiniControl1",
"MiniControl2"
],
"__text": "Control1"
},
"Control": "Control2",
"PushButtonExpandable": {
"MiniPushButton": [
"MiniPushButton1",
"MiniPushButton2"
],
"__text": "PushButton1"
},
"__text": " Substation2\n\n\n\n\n\n\n"
}
],
"__text": " Mainstation2\n\n\n\n\n"
}
],
"ElectricStation": {
"Substation": [
{
"Control": [
"Control1",
"Control2"
],
"PushButton": "PushButton1",
"__text": " Substation1\n\n\n\n\n\n\n"
},
{
"ControlExpandable": {
"MiniControl": [
"MiniControl1",
"MiniControl2"
],
"__text": "Control1"
},
"Control": "Control2",
"PushButtonExpandable": {
"MiniPushButton": [
"MiniPushButton1",
"MiniPushButton2"
],
"__text": "PushButton1"
},
"__text": " Substation2\n\n\n\n\n\n\n"
}
],
"__text": " ElectricStation1\n\n\n\n\n"
},
"__text": " MAIN\n\n\n\n\n\n\n"
}
}
回答 1
Stack Overflow用户
回答已采纳
发布于 2015-08-10 23:27:52
我试着写了解析器，希望能有所帮助。
Json，与您发布的文件相同。
完整的Javascript代码
<script type="text/javascript">
$(document).ready(function() {
$.ajax({
url: "test.json",
dataType: 'json',
success: function(tree) {
traverse($('#treeView'), tree)
$('#treeView li:has(li)').addClass("Max").click(function(e) {
$(this).toggleClass("Max Min");
$(this).children("ul").toggle();
e.stopPropagation();
})
$("[href]").addClass("Blue").click(function(e){
$(this).toggleClass("Purple");
e.stopPropagation();
window.location.href = $(this).attr("href")
})
$('#treeView li').click(function(g) {
var mytree2 = $(this);
mytree2.children('li').toggle();
g.stopPropagation();
})
}
})
});
function traverse(node, o) {
for (var i in o) {
if(i == "__text" || i == "_href")
continue;
if (o[i] !== null && typeof(o[i])=="object") {
if(o[i].__text){
var ul = $("<ul>").appendTo(node)
var node=$('<li>').appendTo(ul)
if(o[i]._href){
var n = $("<span>").appendTo(node)
$(n).text(o[i].__text).attr("href", o[i]._href)
}else{
$(node).text(o[i].__text)
}
}
traverse(node,o[i]);
}
else{
var ul = $("<ul>").appendTo(node)
if(o[i].__text){
var li = $('<li>' + o[i].__text + '<\/li>').appendTo(ul)
if(o[i]._href){
var n = $("<span>").appendTo(node)
$(n).text(o[i].__text).attr("href", o[i]._href)
}
}else{
$('<li>' + o[i] + '</li>').appendTo(ul)
}
}
}
}
</script>此外，我还将treeView无序列表更改为div。
<body>
<div id="treeView">
</div>
</body> 编辑
function traverse(data) {
if (typeof(data) == 'object') {
var ul = $('<ul>');
for (var i in data) {
if(i == "__text" || i == "_href" || i == "_attr")
continue;
if(data[i].__text){
ul.append($('<li>').text(data[i].__text).append(traverse(data[i])));
}
else{
ul.append(traverse(data[i]));
}
}
return ul;
} else {
var textNode = $('<li>').text(data);
return textNode;
}
}也变了
traverse($('#treeView'), tree)至
$('#treeView').append(traverse(tree))在ajax成功函数中。我还没处理过阿塔尔和http。您可以以与前一个函数相同的方式添加它。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/31875963
复制
腾讯云开发者
