前端根据后端返回的数组对象处理转为树状结构

news/2024/11/14 15:19:02/

在项目开发中往往需要用到树形结构,可是后端返回的数据不符合树形结构,这时就需要我们自行转换成树状结构

封装树形结构转换代码

const convertToTree = (data:any) => {const map:any = {};const roots:any = [];data.forEach((item:any) => {map[item.id] = { ...item, children: [] };});data.forEach((item:any) => {if (item.parentId && map[item.parentId]) {map[item.parentId].children.push(map[item.id]);} else {roots.push(map[item.id]);}});return roots;
}

使用

convertToTree(res.data) //调用即可


http://www.ppmy.cn/news/1381984.html

相关文章

Early if-conversion - 优化阅读笔记

Early if-conversion 用于对于没有很多可预测指令的乱序CPU。目标是消除可能误预测的条件分支。 来自分支两侧的指令都会被推测性地执行,并使用 cmov 指令选择结果。 // SSAIfConv 类在确定可能的情况下,对SSA形式的机器码执行if-conversion。该类不包…

【Vue3 组合式 API - setup 选项详解】

文章目录 前言一、什么是 setup 选项?二、使用步骤1. 引入 Vue 和 setup 函数2. 编写逻辑3. 在模板中使用 三、与 Options API 对比 前言 setup 选项是 Vue 3 中最重要的部分之一,允许在组件中使用逻辑复用和组合,取代了 Vue 2.x 中的 Optio…

每日一题——LeetCode1678.设计Goal解析器

方法一 splice 将字符串转为数组,对数组进行遍历,碰到G保持不变,继续循环,碰到 ( 看他后一位,是 ) 则删除两个元素,添加一个 o ,不是则删除四个元素,添加元素 al ,最后将…

【阿里云系列】-基于云效构建部署Springboot项目到ACK

介绍 为了提高项目迭代的速度加速交付产品给客户,我们通常会选择CICD工具来减少人力投入产生的成本,开源的工具比如有成熟的Jenkins,但是本文讲的是阿里云提高的解决方案云效平台,通过配置流水线的形式实现项目的快速部署到服务器…

数据结构:红黑树的模拟实现

目录 1、什么是红黑树? 2、红黑树的相关操作与实现 1、节点定义 2、查找操作 3、插入操作 1、cur为红,p为红,g为黑,cur存在且为红 2、cur为红,p为红,g为黑,u不存在/u存在且为黑 4、判断…

带你摸透C语言相关内存函数

c语言中的小小白-CSDN博客c语言中的小小白关注算法,c,c语言,贪心算法,链表,mysql,动态规划,后端,线性回归,数据结构,排序算法领域.https://blog.csdn.net/bhbcdxb123?spm1001.2014.3001.5343 给大家分享一句我很喜欢我话: 知不足而奋进,望远山而前行&am…

vue,pinia中store赋值,推荐使用computed,能做到响应,直接解构赋值做不到,备忘

官网解读 https://pinia.vuejs.org/zh/core-concepts/ 在这段Vue3 <script setup> 语法的代码中&#xff0c;有两个关于如何从 useCounterStore 返回的store对象中获取状态属性的方式进行了对比。 <script setup> import { useCounterStore } from /stores/count…

力扣-[700. 二叉搜索树中的搜索]

递归法 确定递归函数的参数和返回值 递归函数的参数传入的就是根节点和要搜索的数值&#xff0c;返回的就是以这个搜索数值所在的节点。 代码如下&#xff1a; public TreeNode searchBST(TreeNode root, int val) 确定终止条件 如果root为空&#xff0c;返回null&#xff0c…