如何从嵌套数组生成ul li？

Question

我下面有以下代码，并试图找到一种方法来生成

<ul>

和

<li>

通过 Javascript 输出无序列表。

问题：

1. 如何解析以下数组以生成嵌套无序列表 html？
2. 如果我要使用递归，我将如何递归地迭代所有嵌套子级以打印嵌套无序列表？

我尝试过但没有成功

const data = [
    {
        name: '125313-7j',
    },
    {
        name: '584996-s7',
        _children: [
            {
                name: '747773-jw',
            },
            {
                name: '377526-zg',
                _children: [
                    {
                        name: '955330-wp',
                    },
                    {
                        name: '343693-9x',
                    },
                ],
            },
            {
                name: '638483-y2'
            },
        ],
    },
    {
        name: '306979-mx'
    },
    {
        name: '066195-o1',
        _children: [],
    },
];

$(function() {
let innerHtml = '<ul>';
data.forEach( item => {
  innerHTML += '<li>' + '<div>' + item.name + '</div>';
    if(item._children) {
      // ***ISSUE***  this doesn't print all the children so i cannot recursively get all the children
       console.log('children', item._children);
    }
});

innerHtml += '</ul>';
});

预期产量

<ul>
  <li> <div>Name1</div>
     <ul>
        <li><div>Name2</div>
         .... continue the next unordered list until all children have been displayed ...
      </ul>
   </li>
</ul>

Answer 1

就您而言，递归解决方案对我来说似乎更直观。让我分享一下我对此的见解：

# Pseudocode

# generateList(items)
#   1. Init: html array with the opening "<ul>" tag. 
#            Can also use string but for larger object, string concatenation might be costly.

#   2. for item in items
#       2.1. push('<li><div>', item.name, '</div>')
#       2.2. if item has _children and the length of _children is greater than 0
#            2.2.1. push(result of calling generateNestedList recursively with item._children)

#       2.3. push(closing "<\li>")

#   3. push(closing "</ul>")

#   4. Join the html array elements(in case you used array) into a single string and return it.
# end function

const data = [{
    name: '125313-7j',
  },
  {
    name: '584996-s7',
    _children: [{
        name: '747773-jw',
      },
      {
        name: '377526-zg',
        _children: [{
            name: '955330-wp',
          },
          {
            name: '343693-9x',
          },
        ],
      },
      {
        name: '638483-y2'
      },
    ],
  },
  {
    name: '306979-mx'
  },
  {
    name: '066195-o1',
    _children: [],
  },
];

function generateList(items) {
  const html = ['<ul>'];
  items.forEach((item) => {
    html.push('<li><div>', item.name, '</div>');
    if (item._children?.length > 0) {
      html.push(generateList(item._children));
    }
    html.push('</li>');
  });

  html.push('</ul>');
  return html.join('');
}
const innerHtml = generateList(data);
// console.log(innerHtml);
document.getElementById("list-container").innerHTML = innerHtml;

<div id="list-container"></div>