我如何创建HTML嵌套有序列表

Question

什么是创建一个嵌套列表这样一个从嵌套JSON对象（通过名单，我指的是< OL>标记或类似行为的东西定制）的最佳方式：

1. 父1
          一个。 Sub 1
           b。子2
                     i.Sub子1
                     ii.Sub子2
          ℃。分3
   
2. 父2

举个例子，让我们用最大3“嵌套级别”的限制深。

的JSON对象，会产生这个名单应该是这样的：

[ 
    { 
     "content": "Parent 1", 
     "children": [ 
      { 
       "content": "Sub 1", 
       "children": [...] 
      }, 
      { 
       "content": "Sub 2", 
       "children": [...] 
      } 
     ] 

    }, 
    { 
     "content": "Parent 2" 
    } 
] 

Answer 1

试试这个简单的方法

var obj = [{ 
 
    "content": "Parent 1", 
 
    "children": [{ 
 
    "content": "Sub 1", 
 
    "children": [{ 
 
      "content": "sub sub 12" 
 
    }] 
 
    }, { 
 
    "content": "Sub 2", 
 
    "children": [{ 
 
      "content": "sub sub 12" 
 
    }] 
 
    }] 
 

 
}, { 
 
    "content": "Parent 2" 
 
}]; 
 

 
var html = getListHTML(obj); 
 
console.log(html); 
 
$("body").append(html); 
 

 
function getListHTML(obj) 
 
{ 
 
    if (!obj) 
 
    { 
 
    return ""; 
 
    }  
 
    var html = "<ol>"; 
 
    html += obj.map(function(innerObj) { 
 
    return "<li>" + innerObj.content + "</li>" + getListHTML(innerObj.children) 
 
    }).join(""); 
 
    html += "</ol>"; 
 
    return html; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

然后，您可以给不同的初始值（ 1或a或i）基于层级li

Answer 2

这是一个针对Array#forEach的迭代和递归回调以及正在生成的适当元素的提议。

function getValues(el) { 
 
    var li = document.createElement('li'), 
 
     ol; 
 

 
    li.appendChild(document.createTextNode(el.content)); 
 
    if (Array.isArray(el.children)) { 
 
     ol = document.createElement('ol'); 
 
     el.children.forEach(getValues, ol); 
 
     li.appendChild(ol); 
 
    } 
 
    this.appendChild(li); 
 
} 
 

 
var data = [{ content: 'Parent 1', children: [{ content: 'Sub 1', children: [] }, { content: 'Sub 2', children: [{ content: 'Sub Sub 1' }, { content: 'Sub Sub 2' }, ] }, { content: 'Sub 3' }] }, { content: 'Parent 2' }], 
 
    ol = document.createElement('ol'); 
 

 
data.forEach(getValues, ol); 
 
document.body.appendChild(ol);