如何在HTML

Question

从嵌套的JSON对象创建嵌套列表的最佳方法是什么（通过列表，我的意思是＆lt; ol＆gt;标记或具有类似行为的自定义内容）：

1. 家长1 一个。 Sub 1
   湾Sub 2
   i.Sub Sub 1
   ii.Sub Sub 2
   C。 Sub 3
   
2. 家长2

作为一个例子，让我们使用最大3“嵌套级别”的限制。

生成此列表的JSON对象如下所示：

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

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

Answer 1

尝试这种最简单的方法

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

然后，您可以根据1

的层次结构级别提供不同的起始值（a或i或li）

Answer 2

这是一个针对Array#forEach的迭代和递归回调的提案，并且可以动态生成适当的元素。

＆＃13;

＆＃13;

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);

＆＃13;

＆＃13;

＆＃13;