javascript - 深层遍历节点的方法，生成对应的JSON数据
本文介绍了javascript - 深层遍历节点的方法，生成对应的JSON数据的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
业务需求。我需要把生成的HTML结构生成对应的 JSON。自己写的始终有错误，求指导。
<div id="test">
<div class="row clearfix" data-layout-value="4-4-4">
<div class="col-md-4 column">
<img src="http://placehold.it/200x150?text=Test4" alt='' data-widgetIdentity="c-c:3.0" data-styleId="4" />
</div>
<div class="col-md-4 column">
</div>
<div class="col-md-4 column">
<img src="http://placehold.it/200x150?text=Test4" alt='' data-widgetIdentity="c-c:3.0" data-styleId="4" />
<div class="row clearfix" data-layout-value="6-6">
<div class="col-md-6 column">
<img src="http://placehold.it/200x150?text=Test3" alt='' data-widgetIdentity="x-a:4.0" data-styleId="2"/>
</div>
<div class="col-md-6 column" data-empty="true">
</div>
</div>
</div>
</div>
</div>然后目标JSON：
var json = {
"elements": [
{
"layout": {
"value": "4-4-4",
"elements": [
{
"component": {
"widgetIdentity": "c-c:3.0",
"styleId": "4",
"properties": {}
}
},
{
"empty": {}
},
{
"component": {
"widgetIdentity": "c-c:3.0",
"styleId": "4",
"properties": {}
},
"layout": {
"value": "6-6",
"elements": [
{
"component": {
"widgetIdentity": "x-a:4.0",
"styleId": "2",
"properties": {}
}
},
{
"empty": {}
}
]
}
}
]
}
}
]
};自己的方法：
function createROOT(elements) {
var json = {};
var data = [];
var root = $(elements).children();
$.each(root, function (i, v) {
var child = {};
child.layout = {};
child.layout.value = $(v).attr('data-layout-value');
child.layout.elements = traversalDOM2Json(v);
data.push(child);
});
json.elements = data;
return json
}
function traversalDOM2Json(elements) {
var result = [];
var key = {};
var ele = $(elements).children();
$.each(ele, function (i, v) {
var html = $.trim($(v).html());
if ( html == '') {
key.empty = {};
result.push(key);
} else {
var children = $(this).children();
$.each(children, function (i, v) {
result.push(distinguishDOMType(v));
});
}
});
return result;
};
function distinguishDOMType(elements) {
var childJSON = {};
console.log(elements)
if ( $(elements).hasClass('row') ) {
childJSON.layout = {};
childJSON.layout.value = $(elements).attr('data-layout-value');
childJSON.layout.elements = traversalDOM2Json(elements);
} else {
childJSON.component = {};
childJSON.component.widgetIdentity = $(elements).attr('data-widgetIdentity');
childJSON.component.styleId = $(elements).attr('data-styleId');
childJSON.component.properties = {};
}
return childJSON;
};
var json = createROOT('#test');
console.log(JSON.stringify(json));输出的JSON:
{
"elements": [
{
"layout": {
"value": "4-4-4",
"elements": [
{
"component": {
"widgetIdentity": "c-c:3.0",
"styleId": "4",
"properties": {}
}
},
{
"empty": {}
},
{
"component": {
"widgetIdentity": "c-c:3.0",
"styleId": "4",
"properties": {}
}
},
{
"layout": {
"value": "6-6",
"elements": [
{
"component": {
"widgetIdentity": "x-a:4.0",
"styleId": "2",
"properties": {}
}
},
{
"empty": {}
}
]
}
}
]
}
}
]
}也就是最后一个节点的嵌套关系始终不对。求大家指点。
解决方案
原因是traversalDOM2Json中第二个each中你distinguishDOMType的结果也放到了result中，所以最后那个div解析出来的结果也就出了问题。
这样改一下，能解决嵌套问题
function traversalDOM2Json(elements) {
var result = [];
var key = {};
var ele = $(elements).children();
$.each(ele, function (i, v) {
var html = $.trim($(v).html());
if ( html == '') {
key.empty = {};
result.push(key);
} else {
var children = $(this).children();
var r = []
$.each(children, function (i, v) {
r.push(distinguishDOMType(v));
});
result.push(r);
}
});
return result;
};
输出的JSON会是这样：
{
"elements": [
{
"layout": {
"value": "4-4-4",
"elements": [
[
{
"component": {
"widgetIdentity": "c-c:3.0",
"styleId": "4",
"properties": {}
}
}
],
{
"empty": {}
},
[
{
"component": {
"widgetIdentity": "c-c:3.0",
"styleId": "4",
"properties": {}
}
},
{
"layout": {
"value": "6-6",
"elements": [
[
{
"component": {
"widgetIdentity": "x-a:4.0",
"styleId": "2",
"properties": {}
}
}
],
{
"empty": {}
}
]
}
}
]
]
}
}
]
}
我觉得你的目标JSON那里是不是有一点问题？第三个结点的子节点应该构成一个数组而不是一个对象。
这篇关于javascript - 深层遍历节点的方法，生成对应的JSON数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
