业务需求。我需要把生成的HTML结构生成对应的 JSON。自己写的始终有错误,求指导。
然后目标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": {}
}
]
}
}
]
}
}
]
}
也就是最后一个节点的嵌套关系始终不对。求大家指点。