我如何創建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);