如何创建<ol><li>结构如下 Json 数据</li></ol>

Question

根据以下 JSON 为 OL LI 创建动态结构，并提供 JSON 数据和 OL LI 结构格式。 所以请检查一下。

Json 数据格式为：

 let dataArray = [{ parent1: { id: 1, title: 'Parent', parentId: null, children: [{ child: { id: 2, title: 'Child-1', parentId: 1, children: [{ child: { id: 4, title: 'Child-1.1', parentId: 2, children: [{ child: { id: 6, title: 'Child-1.1.1', parentId: 4, children: [] } }] } }] } }, { child: { id: 3, title: 'Child-2', parentId: 1, children: [{ child: { id: 5, title: 'Child-2.1', parentId: 3, children: [] } }] } }, ] } }]

对于示例示例 OL LI 格式：

    <ol class="organizational-chart">
        <li>
            <div>Parent</div>
            <ol>
                <li>
                    <div>Child-1</div>
                    <ol>
                        <li>
                            <div>Child-1.1</div>
                        </li>
                    </ol>
                </li>
                <li>
                    <div>Child-2</div>
                    <ol>
                        <li>
                            <div>Child-2.1</div>
                            <ol>
                                <li>
                                    <div>Child-2.1.</div>
                                    <ol>
                                        <li>
                                            <div>Child-2.1.1</div>
                                        </li>
                                    </ol>
                                </li>
                            </ol>
                        </li>
                    </ol>
                </li>
        </li>
    </ol>
    

如何按照下面的 JSON 创建上述<ol><li>结构？

Answer 1

您是否尝试将数据与 html 元素一起使用并渲染它，或者您想将 html 元素添加到您的数据中

Answer 2

您需要使用循环和递归来创建嵌套列表。 这是一个伪代码，您应该“翻译”成正确的 javascript。

dataArray.forEach(rootNode => {
  const element = createList(rootNode);
  document.body.appendChild(element);
});

// create elements
function createList(node) {
  const ol = cretateOlElement(node);
  node.children.forEach(listItem => {
    const li = createListItem(ol, listItem); // recursively check for children and call createList again
    ol.appendChild(li);
  });

  return ol;
}

Answer 3

 var dataArray = [{ parent1: { id: 1, title: 'Parent', parentId: null, children: [{ child: { id: 2, title: 'Child-1', parentId: 1, children: [{ child: { id: 4, title: 'Child-1.1', parentId: 2, children: [{ child: { id: 6, title: 'Child-1.1.1', parentId: 4, children: [] } }] } }] } }, { child: { id: 3, title: 'Child-2', parentId: 1, children: [{ child: { id: 5, title: 'Child-2.1', parentId: 3, children: [] } }] } }, ] } }] function li(){ return document.createElement("li"); } function ol(){ return document.createElement("ol"); } function div(){ return document.createElement("div"); } function addList(rawData, node){ let parent = ol(); const {parent1, parent: parent2, child} = rawData; //since data is not defined, so taking these keys as per data //taking data let data; if(parent1) data = parent1; else if(parent2) data = parent2; else data = child; node.appendChild(parent); //append parent node to the grandParent passed parent.innerHTML = `<div>${data.title}</div>`; //add title div data.children?.forEach((ele) => { //loop over children let child = li(); parent.appendChild(child); //append li tag addList(ele, child); //run recursion for adding children on this li component }); } dataArray.forEach((data) => addList(data, document.getElementById("root")))

 <div id="root"></div>