Javascript Procedure应该接受任何UL并将其转换为JSON Object,其中节点的文本值转换为“Name”属性,子节点转换为“Task”数组。
HTML列表
<ul id="tasks">
<li>
Task1
<ul>
<li>Task2</li>
</ul>
</li>
<li>Task3</li>
<li>Task4</li>
</ul>
预期结果:
从上面的列表中可以看到以下JSON,以反映层次结构
[{"Name":"Task1","Tasks":[{"Name":"Task2","Tasks":[]}]},{"Name":"Task3","Tasks":[]},{"Name":"Task4","Tasks":[]}]
var htmlToJson = function childrenToJson(node) {
let arr = [];
for(let i=0; i<node.children.length; i++){
let item = {};
item.name = node.children[i].textContent.match(/(.*)\n?/)[1];
item.tasks = node.children[i].children.length>0 ? childrenToJson(node.children[i].children[0]) : [];
arr.push(item);
}
return arr;
}
console.log(htmlToJson(document.querySelector('#tasks')));
<ul id="tasks">
<li>Task1
<ul>
<li>Task2
<ul>
<li>Task5</li>
<li>Task7</li>
</ul>
</li>
<li>Task6</li>
</ul>
</li>
<li>Task3</li>
<li>Task4</li>
</ul>