递归实现树状的数据筛选
后端返回数据如下：
let res = { code: "0000", message: "ok", data: { content: [ { id: 1, createTime: 1598951438000, updateTime: 1598951438000, description: "J-Pop", groupId: 18, name: "J-Pop", orderSequence: 1, status: 1, }, { id: 2, createTime: 1598951438000, updateTime: 1598951438000, description: "Chinese Pop/Rock", groupId: 18, name: "Chinese Pop/Rock", orderSequence: 1, status: 1, }, { id: 3, createTime: 1598951438000, updateTime: 1598951438000, description: "Classical", groupId: 18, name: "Classical", orderSequence: 1, status: 1, }, { id: 4, createTime: 1598951439000, updateTime: 1598951439000, description: "J-Pop", groupId: 1, name: "J-Pop", orderSequence: 1, status: 1, }, { id: 5, createTime: 1598951439000, updateTime: 1598951439000, description: "Chinese Pop/Rock", groupId: 1, name: "Chinese Pop/Rock", orderSequence: 1, status: 1, }, { id: 6, createTime: 1598951439000, updateTime: 1598951439000, description: "Classical", groupId: 1, name: "Classical", orderSequence: 1, status: 1, }, { id: 7, createTime: 1598951440000, updateTime: 1598951440000, description: "Pop", groupId: 18, name: "Pop", orderSequence: 1, status: 1, }, { id: 8, createTime: 1598951440000, updateTime: 1598951440000, description: "Pop", groupId: 1, name: "Pop", orderSequence: 1, status: 1, }, { id: 9, createTime: 1598951440000, updateTime: 1598951440000, description: "Rap/Hip-Hop", groupId: 18, name: "Rap/Hip-Hop", orderSequence: 1, status: 1, }, { id: 10, createTime: 1598951440000, updateTime: 1598951440000, description: "Rap/Hip-Hop", groupId: 1, name: "Rap/Hip-Hop", orderSequence: 1, status: 1, }, { id: 11, createTime: 1598951440000, updateTime: 1598951440000, description: "Dance", groupId: 18, name: "Dance", orderSequence: 1, status: 1, }, { id: 12, createTime: 1598951440000, updateTime: 1598951440000, description: "Dance", groupId: 1, name: "Dance", orderSequence: 1, status: 1, }, { id: 13, createTime: 1598951440000, updateTime: 1598951440000, description: "Latin", groupId: 18, name: "Latin", orderSequence: 1, status: 1, tblTags: [ { id: 13572, createTime: 1610440704000, updateTime: 1610440704000, description: "拉丁", pid: 13, name: "拉丁", status: 1, tblTags: [ { id: 1111, createTime: 1610440704000, updateTime: 1610440704000, description: "拉丁11", pid: 1311, name: "拉丁111", status: 111, tblTags: [ { id: 2222, createTime: 1610440704000, updateTime: 1610440704000, description: "拉丁22", pid: 1311, name: "拉丁222", status: 222, }, ], }, ], }, { id: 13573, createTime: 1610440704000, updateTime: 1610440704000, description: "拉美音乐", pid: 13, name: "拉美音乐", status: 1, }, { id: 13574, createTime: 1610440704000, updateTime: 1610440704000, description: "拉丁流行", pid: 13, name: "拉丁流行", status: 1, }, { id: 13575, createTime: 1610440704000, updateTime: 1610440704000, description: "拉丁爵士", pid: 13, name: "拉丁爵士", status: 1, }, { id: 13576, createTime: 1610440704000, updateTime: 1610440704000, description: "拉丁灵魂乐", pid: 13, name: "拉丁灵魂乐", status: 1, }, { id: 13577, createTime: 1610440704000, updateTime: 1610440704000, description: "拉丁摇滚", pid: 13, name: "拉丁摇滚", status: 1, }, { id: 13578, createTime: 1610440704000, updateTime: 1610440704000, description: "拉丁说唱", pid: 13, name: "拉丁说唱", status: 1, }, { id: 13579, createTime: 1610440704000, updateTime: 1610440704000, description: "拉丁民谣", pid: 13, name: "拉丁民谣", status: 1, }, { id: 13580, createTime: 1610440705000, updateTime: 1610440705000, description: "巴恰塔", pid: 13, name: "巴恰塔", status: 1, }, { id: 13581, createTime: 1610440705000, updateTime: 1610440705000, description: "拉丁另类摇滚", pid: 13, name: "拉丁另类摇滚", status: 1, }, { id: 13582, createTime: 1610440705000, updateTime: 1610440705000, description: "萨尔萨", pid: 13, name: "萨尔萨", status: 1, }, { id: 13583, createTime: 1610440705000, updateTime: 1610440705000, description: "探戈", pid: 13, name: "探戈", status: 1, }, { id: 13584, createTime: 1610440705000, updateTime: 1610440705000, description: "热带", pid: 13, name: "热带", status: 1, }, ], }, { id: 14, createTime: 1598951440000, updateTime: 1598951440000, description: "Rap", groupId: 18, name: "Rap", orderSequence: 1, status: 1, }, { id: 15, createTime: 1598951440000, updateTime: 1598951440000, description: "Rap", groupId: 1, name: "Rap", orderSequence: 1, status: 1, }, { id: 16, createTime: 1598951440000, updateTime: 1598951440000, description: "Latin", groupId: 1, name: "Latin", orderSequence: 1, status: 1, tblTags: [ { id: 11635, createTime: 1610439943000, updateTime: 1610439943000, description: "拉丁", pid: 16, name: "拉丁", status: 1, }, { id: 11636, createTime: 1610439943000, updateTime: 1610439943000, description: "拉美音乐", pid: 16, name: "拉美音乐", status: 1, }, { id: 11637, createTime: 1610439943000, updateTime: 1610439943000, description: "拉丁流行", pid: 16, name: "拉丁流行", status: 1, }, { id: 11638, createTime: 1610439943000, updateTime: 1610439943000, description: "拉丁爵士", pid: 16, name: "拉丁爵士", status: 1, }, { id: 11639, createTime: 1610439943000, updateTime: 1610439943000, description: "拉丁灵魂乐", pid: 16, name: "拉丁灵魂乐", status: 1, }, { id: 11640, createTime: 1610439943000, updateTime: 1610439943000, description: "拉丁摇滚", pid: 16, name: "拉丁摇滚", status: 1, }, { id: 11641, createTime: 1610439943000, updateTime: 1610439943000, description: "拉丁说唱", pid: 16, name: "拉丁说唱", status: 1, }, { id: 11642, createTime: 1610439943000, updateTime: 1610439943000, description: "拉丁民谣", pid: 16, name: "拉丁民谣", status: 1, }, { id: 11643, createTime: 1610439944000, updateTime: 1610439944000, description: "巴恰塔", pid: 16, name: "巴恰塔", status: 1, }, { id: 11644, createTime: 1610439944000, updateTime: 1610439944000, description: "拉丁另类摇滚", pid: 16, name: "拉丁另类摇滚", status: 1, }, { id: 11645, createTime: 1610439944000, updateTime: 1610439944000, description: "萨尔萨", pid: 16, name: "萨尔萨", status: 1, }, { id: 11646, createTime: 1610439944000, updateTime: 1610439944000, description: "探戈", pid: 16, name: "探戈", status: 1, }, { id: 11647, createTime: 1610439944000, updateTime: 1610439944000, description: "热带", pid: 16, name: "热带", status: 1, }, ], }, { id: 17, createTime: 1598951440000, updateTime: 1598951440000, description: "Miscellaneous/Other", groupId: 18, name: "Miscellaneous/Other", orderSequence: 1, status: 1, }, { id: 18, createTime: 1598951441000, updateTime: 1598951441000, description: "Miscellaneous/Other", groupId: 1, name: "Miscellaneous/Other", orderSequence: 1, status: 1, }, { id: 19, createTime: 1598951441000, updateTime: 1598951441000, description: "Hip-Hop/Rap", groupId: 18, name: "Hip-Hop/Rap", orderSequence: 1, status: 1, }, { id: 20, createTime: 1598951441000, updateTime: 1598951441000, description: "Hip-Hop/Rap", groupId: 1, name: "Hip-Hop/Rap", orderSequence: 1, status: 1, }, ], pageable: { sort: { sorted: false, unsorted: true, empty: true, }, offset: 0, pageNumber: 0, pageSize: 20, unpaged: false, paged: true, }, totalElements: 12346, last: false, totalPages: 618, number: 0, size: 20, sort: { sorted: false, unsorted: true, empty: true, }, numberOfElements: 20, first: true, empty: false, }, };
希望得到结果如下：
js算法如下：
function formatData(array) { for (let item of array) { item.value = item.id; item.label = item.name; item.children = []; // 删除返回的没用的属性 delete item.createTime; delete item.description; delete item.groupId; delete item.id; delete item.name; delete item.orderSequence; delete item.status; delete item.updateTime; delete item.pid; if (item.tblTags && item.tblTags.length != 0) { item.children = item.tblTags; // 删除返回的没用的属性 delete item.tblTags; formatData(item.children); } } return array; } if (res.data.content && res.data.content.length && res.data.content.length != 0) { var ret = formatData(res.data.content); } console.log(ret);
案例：
希望得到结果如图
后端返回数据如下
js实现代码如下
界面效果图
浙公网安备 33010602011771号