【JS】扁平树数据转为树结构

扁平数据

转为最终效果

js 复制代码
[{"label":"疼逊有限公司","code":"1212","disabled":false,"parentId":"none","children":[{"label":"财务部","code":"34343","disabled":false,"parentId":"1212"},{"label":"人事部","code":"43434","disabled":false,"parentId":"1212"},{"label":"经营 部","code":"53543","disabled":false,"parentId":"1212","children":[{"label":"市场部","code":"23232","disabled":true,"parentId":"53543"},{"label":"销售部","code":"3435435","disabled":false,"parentId":"53543"}]}]}]

js 复制代码
/**
 * 删除子级数据为空的子级
 * @param {[]} node 
 * @param {string} [childKey='children'] 子级字段 默认-children
 * @returns {[]}
 */
const removeNoneDataChildren = (node, childKey = 'children') => {
    const remove = nodeItem => {
        if (nodeItem[childKey] && nodeItem[childKey].length === 0) {
            delete nodeItem[childKey];
        } else if (nodeItem[childKey]) {
            nodeItem[childKey].forEach(remove);
        }

    }
    node.forEach(remove);
    return node
}

/**
 * 扁平数据转树结构
 * @param {[]} flatList 扁平化树的数据
 * @param {String} [idKey="id"] 主字段 默认-id
 * @param {String} [parentKey="parentId"] 父级字段 默认-parentId
 * @param {string} [childKey='children'] 子级字段 默认-children
 * @param {boolean} [delNoneDataChildren=true] 删除子级数据为空的子级 默认-true
 * @returns {[]}
 */
const buildTree = (flatList, idKey = 'id', parentKey = 'parentId', childKey = 'children', delNoneDataChildren = true) => {
    const map = {};
    const roots = [];

    flatList.forEach(item => {
        map[item[idKey]] = { ...item, [childKey]: [] };
    });

    flatList.forEach(item => {
        const itemId = item[idKey];
        const parentId = item[parentKey];

        if (parentId !== null && map[parentId]) {
            map[parentId][childKey].push(map[itemId]);
        } else {
            roots.push(map[itemId]);
        }
    });

    if (delNoneDataChildren) return removeNoneDataChildren(roots, childKey);
    return roots;
}


// 使用
const test =[{label:'疼逊有限公司',code:'1212',disabled:false,parentId:'none'},{label:'财务部',code:'34343',disabled:false,parentId:'1212'},{label:'人事部',code:'43434',disabled:false,parentId:'1212'},{label:'经营部',code:'53543',disabled:false,parentId:'1212'},{label:'市场部',code:'23232',disabled:true,parentId:'53543'},{label:'销售部',code:'3435435',disabled:false,parentId:'53543'}];
// 使用自定义字段
const tree = buildTree(test, 'code', 'parentId', 'children');
console.log("1 ~ tree:", JSON.stringify(tree))
相关推荐
编程岁月3 分钟前
java面试-0203-java集合并发修改异常、快速/安全失败原理、解决方法?
java·开发语言·面试
whltaoin18 分钟前
AI 超级智能体全栈项目阶段五:RAG 四大流程详解、最佳实践与调优(基于 Spring AI 实现)
java·人工智能·spring·rag·springai
junnhwan19 分钟前
【苍穹外卖笔记】Day05--Redis入门与店铺营业状态设置
java·数据库·redis·笔记·后端·苍穹外卖
一枚前端小能手20 分钟前
🚀 巨型列表渲染卡顿?这几个优化技巧让你的页面丝滑如德芙
前端·javascript
酷柚易汛智推官20 分钟前
Electron技术深度解析:跨平台桌面开发的利器与挑战
前端·javascript·electron
llz_11226 分钟前
第五周作业(JavaScript)
开发语言·前端·javascript
摇滚侠38 分钟前
Spring Boot 3零基础教程,Spring Boot 特性介绍,笔记02
java·spring boot·笔记
W.Y.B.G41 分钟前
JavaScript 计算闰年方法
开发语言·前端·javascript
Excuse_lighttime42 分钟前
只出现一次的数字(位运算算法)
java·数据结构·算法·leetcode·eclipse
渣哥1 小时前
你以为只是名字不同?Spring 三大注解的真正差别曝光
javascript·后端·面试