js数组list转换tree

29 阅读1分钟
后端接口返回数据

逐级parentId为父级的id,parentId=0时 为tree第一级

1698998146422.png

先组装成自己想要的数据格式
const area = [...] //接口数据
const areaList = [];
area.forEach(({id,areaName,parentId}, index) => {
        areaList.push({
            id,
        areaName,
        parentId,
        value: id,
        text: areaName,
        children: []
    });
});
// 方法调用
handleListTree(areaList)

利用递归处理多层子集

function handleListTree(dataList){
	const filterChildren = function(data){
	let children = dataList.filter(item => item.parentId === data.id)
	if(children.length > 0){
		children.forEach(child=>{
		child.children = filterChildren(child)
		})
	}
	return children;
	}
	return dataList.filter(item=>{
		if(item.parentId == 0){
			item.children = filterChildren(item)
			return true;
		}
	})
}

结果

1698998830736.png