Question

Javascript过程应该采用任何UL，并将其转换为JSON对象，其中节点的文本值转换为“名称”属性，子级转换为“任务”数组。

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":[]}]

Answer 1

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>

如何使用Javascript将嵌套列表文本节点转换为JSON

1 个答案: