在保持代码正常工作的同时将xml转换为json [英] convert xml to json while keeping code working
本文介绍了在保持代码正常工作的同时将xml转换为json的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个xml文件和与之关联的html文件。
html文件采用xml元素，并为包含的每个节点类型输出带有超链接和图片的树。如何将代码转换为适用于JSON而不是XML。这是代码和xml
I have a xml file, and an html file associated with it. the html file takes the xml elements and outputs a tree with hyperlinks and pictures for each node type included. how can I convert the code to work for JSON instead of XML. this is the code and the xml
我向attr元素添加了一个函数，因此当我单击它时它会打开一个表：
I added a function to attr elements so it opens a table when I click on it:
<!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文件放到这里。仅添加1行以测试attr：
and heres the json file again. only 1 line added to test the 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"
}
}
推荐答案
我尝试编写解析器，希望对您有所帮助。
I have tried writing the parser, Hope it helps.
The Json ，就是您发布的文件。
The Json, is the same file that you have posted
完整的Javascript代码
The complete Javascript code,
<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。
Also i have changed the treeView unordered list to 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成功函数中。我没有处理attr和http。您可以通过与上一个功能相同的方式添加它。
in the ajax success function. I haven't handled for the attr and http. you can add it in the same way as the previous function.
这篇关于在保持代码正常工作的同时将xml转换为json的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
