JavaScript将一层级对象数组转为children嵌套的三层级树状对象数组（多级树状分类）

已于 2023-08-09 16:46:47 修改
阅读量1.6k 收藏 2
点赞数 2
分类专栏： 前端项目教程以及代码 文章标签： javascript 微信小程序 vue.js 前端 json
于 2023-07-31 20:33:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_23073811/article/details/131959686
版权
本文介绍了如何使用JavaScript将一层级的对象数组转换为适合前端使用的具有children属性的三层级树状对象数组，特别适用于Vue、微信小程序等场景的多级分类数据处理。文中详细讲解了两种情况的转换方法：一是从id和parentId的一层级数组转换，二是处理已包含三级分类信息的一层级数组。
摘要由CSDN通过智能技术生成

有时候后端返回的数据不适合前端，我们就需要进行转换，比如我想用elementUI的级联选择器，而这个组件对数据格式有要求，本篇文章将介绍如何将一层级对象数组数据格式转为三层级嵌套children数组，JavaScript、Vue、小程序等都适用，使用情景为多级分类，嵌套数据

情况1：原数组格式为id和parentId的一层级对象数组

  • 原数据格式，包含父级id的一层级对象数组，这个可以根据parentId进行整理
 {
    id: 1, name: '对象1'
了解本专栏 订阅专栏 解锁全文 超级会员免费看
coderYYY
关注
专栏目录
订阅专栏
如何将数组数据转化成树形结构（小案例演示）
背心的博客
11-07 3030
如何将数组数据转化成树形结构（小案例演示）
js实现一维数组转成无限层级的树形结构数据，树的层级由传入的一维数组决定
qq_41297968的博客
01-16 943
js实现一维数组转成无限层级的树形结构数据，树的层级由传入的一维数组决定 使用递归实现，直接上代码： (() => { let originArr = [ {id: 10, label: 'WDE', value: '555552', pid: 9}, {id: 10.1, label: 'WDE', value: '555552', pid: 9}, {id: 10.2, label: 'WDE', value: '555552', pid: 9}, {id: 1
【JS】对象数组转为三层树结构数据
一个美女的博客
08-03 359
树形结构数据处理
JavaScript将数组转化为多级树状结构
最新发布
paofuluolijiang的博客
06-10 482
【代码】JavaScript将数组转化为多级树状结构。
JavaScript 数组结构与树结构的转换
程序员小明1024
12-22 907
@charset "UTF-8"; .markdown-body { line-height: 1.75; font-weight: 400; font-size: 15px; overflow-x: hidden; color: rgba(43, 43, 43, 1); font-family: -apple-system, system-ui, BlinkMacSystemFont, Hel...
数组转children
weixin_46657567的博客
06-26 181
方法acc.push({});} else {i++) {if (!});return acc;}, []);数据name: 'a',level: 1}, {name: 'b',level: 2}, {level: 3}, {level: 4}, {name: 'c',level: 1}, {name: 'd',level: 2}];转children[{
javascript将扁平的数据转为树形结构的高效率算法
10-15
在JavaScript编程中，将扁平的数据结构转换为树形结构是一项常见的任务，特别是在处理层级关系的数据时，如组织结构、菜单导航或文件系统等。在本文中，我们将深入探讨一种高效的算法，该算法可以将一维数组转换为...
js实现无限层级树形数据结构(创新算法)
10-15
在本文中，我们将详细介绍如何使用JavaScript实现无限层级的树形数据结构。首先，我们将解释树形数据结构在计算机科学中的意义和作用，随后将介绍如何通过JavaScript实现这种结构，并以示例代码的方式讲解其工作原理...
js 一维数组生成树结构
tshjy1的博客
03-24 268
【代码】js 一维数组生成树结构。
js 一维数组，转成嵌套数组
lixiaonaaa的博客
03-08 771
// 情况一： // 数据源var egs = [ {name_1: 'name_1...'}, {name_2: 'name_4...'}, {name_3: 'name_3...'}, {name_0: 'name_0...'}, ].reverse() // 最终想要的数据形式 // {name_1: 'name_1...', // children.
JavaScript 层级数组常用工具方法（一）—— 数组结构转换
顺芯技术猿的博客
04-15 1118
本文介绍了 JavaScript 中层级数组的常用工具方法之一，即数组结构转换。在处理层级数组时，经常需要将数组从一种结构转换为另一种结构，以满足不同的需求。本文将探讨如何使用 JavaScript 中的一些常用方法来实现数组结构转换，包括数组的扁平化、数组的嵌套结构转换。通过学习这些常用的数组结构转换技巧，可以更加高效地处理层级数组数据，提升 JavaScript 编程的效率与灵活性。
【JS】数组多层嵌套处理方法
m0_61049675的博客
06-28 1986
【代码】【JS】数组多层嵌套处理方法。
js构建树形结构
xuan971130的博客
11-01 876
jjs转换成数据
将一个对象数组合并为带子集children的树形结构
GongWei_的博客
08-13 826
var arr=[ { banci: "09:00-21:00", nowday: "5月18日", shiftName: "白班", sid: "21381668786929665", }, { banci: "21:00-09:00", nowday: "5月18日", shiftName: "晚班", sid: "2138166878692
(JS 构造树工具方法) 数组转成树结构
qq_27302871的博客
12-27 950
(JS 构造树工具方法) 数组转换成树结构数据 文章目录(JS 构造树工具方法) 数组转换成树结构数据前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、
通过js把一个数组修改成多层嵌套多个数组的几种方法
a13145211的博客
03-19 9351
1、首先一级与二级相同的嵌套 let arr = [ { date: '2020-01-06', age: '18'}, { date: '2020-01-06', age: '25'}, { date: '2020-01-07', age: '34'}, { date: '2020-01-07', age: '18'}, { date: '202...
js实现数组列表转换多级tree（数组到树）
weixin_43096828的博客
04-20 305
【代码】实现数组列表转换多级tree（数组到树）
后台树状菜单，js实现递归无限分类
weixin_34416649的博客
11-09 175
如果你需要更好看的无限分类，请查看http://www.cnblogs.com/zx-admin/p/8021734.html //新闻类别管理 public function new_classify() { $arr = M('news_classify')->where("fid = 0")->select(); $html...
js tree数据的无限极分类
小白前端
12-30 317
vue数据的无限极递归输结构
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

coderYYY

请简单粗暴地爱我，一元一元的赏

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值