不确定层级的级联数据展示

var data = [
    {id: '1',name: '1',parentId: null,},
    {id: '2',name: '1-1',parentId: '1', },
    {id: '3',name: '1-2',parentId: '1',},
    {id: '4',name: '2',parentId: null,},
    {id: '5',name: '2-1',parentId: '4',},
    {id: '6',name: '2-2',parentId: '4',},
    {id: '7',name: '2-2-1',parentId: '6',}
]
function fn(data, rootId = null) {
      const children = []  
      data.forEach(item => {
      if (item.parentId === rootId) {   
      // 最关键的俩步
      children.push(item) 
      //如果每一项的parentId=rootId就添加到数组里
      item.children = fn(data, item.id) 
      //给每一项加children属性,值递归将所有数据传入,取所有数据parentId=item.id的作为子项
      }
	});
     return children
}
const data1 = fn(data, null)
function digui(data1) {
    if (!data1) {
        return ''
    }
    var html = '<ul >';
    for (var i = 0; i < data1.length; i++) {
        html += '<li>' + data1[i].name;
        html += digui(data1[i].children); //中间的内容递归,把children传入,生成ul、li。
        html += '</li>\n';
        };
    html += '</ul>';
    return html;
    }
const html = digui(data1)
document.getElementsByClassName("list")[0].innerHTML = html
posted @   梧桐树211  阅读(52)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· C#/.NET/.NET Core技术前沿周刊 | 第 29 期(2025年3.1-3.9)
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异
点击右上角即可分享
微信分享提示
主题色彩