parentId扁平数据格式转换成带有children的层级数据格式

最新推荐文章于 2024-08-26 16:45:59 发布

原创

最新推荐文章于 2024-08-26 16:45:59 发布 · 1.7k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#vue

需求：

后台给到一些数据，我是想通过js来把这些数据变成树的格式。因为我使用element-ui里面的el-tree组件，使用该组件需要的数据格式是这种的，带有层级的，有children的。

在这里插入图片描述
但是后台给我的是这种的，扁平的，通过parentid来找爸爸的。

[
                {
   
    "id": "9", "pId": "5", "name": "哈哈哈", "open": true, "checked": false, "ext": "", "modify": false, "enable": true },

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

刘刘刘刘刘~

关注关注

3
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

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

coderYYY的博客

07-31

1875

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

JAVA将父子节点封装成children数组形式/树形

weixin_42960380的博客

03-09

1100

** ## 先看一下效果: ** [ { "children": [ { "label": "心绞痛", "value": 31 }, { "label": "急性心梗", "value": 32 } ], "label": "心血管系统疾病", "value": 3 }, { "label": "血液系统疾病", "value":

参与评论您还未登录，请先登录后发表或查看评论

js树结构操作（parentId转children，扁平化，递归父节点）

weixin_46037781的博客

03-01

2043

一、方法 parentId转children function createArr(data, arr, id) { // parentId转children const filtersList = arr.filter(e => e.parentId === id); data.children = filtersList; data.children = data.children.map(e => { e = createArr(e, arr, e.id);

vue后端返回parentId，前端处理成children嵌套数据

weixin_48004568的博客

03-08

771

【代码】vue后端返回parentId，前端处理成children嵌套数据。

树形控件el-tree数据转换

lishuaihao的博客

01-12

1412

估计到这来的都挺急的把，直接上代码，拿去直接粘走： export function transListToTreeData(list, rootValue) { // 思路：先找到所有的根节点，然后再再去添加children，第二个参数是根节点的pid值 var arr = []; list.forEach((item) => { if (item.pid === rootValue) { const children = transListToTreeData(lis

JavaScript之parentId转换成children数据，并解析

weixin_34184561的博客

04-08

2029

1.用parentId的数据格式转换成有children的数据vararray=[]; variterator1=function(treeNodes){ if(!treeNodes||!treeNodes.length)return; varparent,i=0,obj={}; while(i<tr...

后端返回parentId，前端处理成children嵌套数据

yang295242361的博客

09-08

970

把有parentId和id结构的数据处理成children嵌套数据，字段名称不一致，可以设置。rouyi 的 vuetree函数结合elementui el-table组件使用。

把扁平化的数据转换成树形结构的JSON

08-12

在IT行业中，数据的组织和...总之，将扁平化的数据转换成树形结构是JavaScript开发中的常见任务，尤其在处理JSON数据时。通过理解数据结构和递归算法，我们可以有效地完成这个转换，从而更好地管理和操作层次化数据。

把扁平化的数据转换成树形结构的JSON，把树形JSON扁平化.zip

06-16

本主题将深入探讨如何将扁平化的数据转换成树形结构的JSON，以及如何将树形JSON扁平化。这些操作在数据处理、数据库设计和算法实现中十分常见。首先，我们来理解“扁平化数据”。在计算机编程中，扁平化数据通常是...

数组转为tree，parengId转为children格式

qq_37161741的博客

08-26

303

【代码】数组转为tree，parengId转为children格式。

前端js扁平化数组元素根据parentID进行树形处理

m0_66879773的博客

01-26

634

【代码】数组元素根据parentID进行树形处理。

把children里面的第一个对象里面的每一个值提出来，层级提高

weixin_44860440的博客

06-29

565

原有： var data = { time: 2020, age: 16, name: “郭达”, children: [{ province: “陕西省”, county: “蓝田县”, home: “汤臣一品”, street: “王家屯”, transport: “乒乓球” }] } 期望： var data = { time: 2020, age: 16, name: “郭达”, province: “陕西省”, county: “蓝田县”, home: “汤臣一品”, street: “王家屯”,

vue如何把一个数组转为树形结构( 把相同的父节点parentId合并children中)

weixin_42711805的博客

02-24

1133

【代码】vue如何把一个数组转为树形结构(把相同的父节点parentId合并children中)

JavaList集合根据ParentId递归【无限套娃】

java李阳勇的博客

09-16

2246

JavaList集合根据ParentId递归【无限套娃】

Java后端根据parentId返回树形结构的数据

qq_44723773的博客

12-12

1783

在开发中,经常会遇到返回树形结果的数据,那么下面这个例子就是较好的学习案例.主要的接口返回实现类。

vue 将平级数据处理成父子节点数据

weixin_45844542的博客

04-29

582

场景：在调接口的时候后端反的数据是平级的对象，为了展示符合设计图上的数据，需要将数据进行处理 export default { data() { return { PlatformConfirm: [], //改造好的数组 }, methods: { // 将数据改造成父子结构 // Platform.serviceOrderItem 接口的数据数组 Platform.serviceOrderItem.forEach((item) =>

将有子父关系字段的List数据转化成Tree型数据的最佳实现

彤先生的博客

10-13

560

因为业务的需要，想将一个无限子父关系数据转化成Tree型结构数据，在网上找了很多，没有一个比较完美的 /** * @Author: Pishum * @Description: 将map集合按照传入的key转换成treeList返回 * @Date: Created in 09:34 2020/5/9 * Modified By: */ public class MapTreeUtils { /** * 将一般数组按照条件转换为树形结构 * * @Auth

数组按照唯一父id进行分类

m0_53264079的博客

09-24

467

var data = [{ id: 0, name: "父亲0" }, { id: 1, name: "父亲1" }, { id: 2, name: "父亲2" }, { id: 4, name: "儿子00", parentId: 0 ...

根据 parentId 对对象数组进行重构

bubbleSweet的博客

09-25

703

根据 parentId 对对象数组进行重构题目： const nodeList = [{ id: '3', parentId: '1' }, { id: '1', parentId: '' }, { id: '2', parentId: '4' }] 根据 parentId 和 id 相匹配，重构对象数组得到： const re = [{ id: '1', parentId: '', children: [{

部门层级数据表里面的数据要什么格式

最新发布

04-24

<think>好的，用户现在想了解部门层级数据表的数据格式要求，用于生成组织架构图，并且希望看到JSON或CSV的示例。首先，我需要回顾之前的对话历史，看看有没有相关的信息可以提供。用户之前提到过通用组织架构图的VBA实现，以及数据结构抽象的部分，比如OrgNode类型，包含ID、ParentID、DisplayText、Depth和Children。这可能和当前的问题有关联。用户现在明确询问数据格式要求，可能需要结构化的数据，比如每个部门的ID、父节点ID、名称、层级深度等。在之前的回答中，已经提到过树形结构、矩阵式布局和流程图式拓扑，所以数据格式需要支持这些结构的生成。用户还提到JSON和CSV示例，所以需要分别给出这两种格式的具体例子。然后，用户提供的引用内容中，引用[1]是关于Hive外部表的创建，指定HDFS路径，虽然和当前问题不直接相关，但可能需要注意数据存储的位置。引用[2]和[3]讨论了JSON和CSV的优缺点，用户提到JSON体积大，转而使用CSV，但程序内部转换。这可能意味着用户对数据格式的效率有要求，所以在建议中需要提到JSON和CSV各自的适用场景，比如JSON适合复杂嵌套，CSV适合简单结构和大数据量。接下来，用户的需求是生成组织架构图，数据表的结构需要包含必要的关系信息，比如每个部门的父部门ID，这样才能构建层级结构。可能需要必填字段如ID、ParentID、Name，以及可选字段如层级深度、负责人、备注等。需要确保ID唯一，ParentID引用现有ID，根节点的ParentID为空或特定值。在之前的回答中，VBA代码使用了OrgNode类型，包含类似字段，所以可以沿用这些字段到数据格式中。同时，在示例部分，需要展示JSON和CSV的结构，比如JSON使用嵌套结构或扁平结构，CSV则用逗号分隔各字段。另外，用户可能关心数据导入时的注意事项，比如编码格式、数据校验、性能优化等。需要提醒使用UTF-8编码，避免BOM，数据校验如ID唯一性，ParentID有效性，以及在大数据量时选择CSV格式。最后，考虑到用户之前的问题是关于VBA生成组织架构图，可能需要说明如何将这些数据格式与VBA代码结合，比如如何读取CSV或JSON文件，构建节点集合，然后应用布局算法。同时，根据引用[3]，用户可能更倾向于使用CSV，但需要处理嵌套关系，可能需要程序内部转换，比如将扁平CSV转换为树形结构。总结回答结构：数据格式要求分为必填和可选字段，提供JSON和CSV示例，给出数据导入建议，并比较两种格式的优缺点，帮助用户根据具体情况选择。</think>#### 部门层级数据表格式要求与示例根据组织架构图的生成需求，部门层级数据表需满足以下结构化要求： --- ### 一、核心字段要求 | 字段名称 | 必填 | 格式说明 | 示例值 | |--------------|------|------------------------------|-----------------| | **ID** | 是 | 唯一标识符（字符串/数字） | `"D001"`/`1001` | | **ParentID** | 是 | 上级部门ID（根节点为空值） | `"D000"`/`Null` | | **Name** | 是 | 部门名称（支持多语言） | `"技术研发部"` | | **Depth** | 否 | 层级深度（自动计算或手动指定）| `2` | | **Leader** | 否 | 负责人信息 | `"张三"` | | **Extra** | 否 | 扩展元数据（JSON格式） | `{"budget":500}`| --- ### 二、数据格式示例 #### 1. **JSON格式（支持嵌套或扁平结构）** **嵌套结构**（适合复杂层级）： ```json { "departments": [ { "ID": "D001", "ParentID": null, "Name": "总部", "Children": [ { "ID": "D002", "ParentID": "D001", "Name": "技术中心", "Children": [ {"ID": "D003", "ParentID": "D002", "Name": "前端组"} ] } ] } ] } ``` **扁平结构**（适合导入数据库或程序处理）： ```json [ {"ID": "D001", "ParentID": null, "Name": "总部"}, {"ID": "D002", "ParentID": "D001", "Name": "技术中心"}, {"ID": "D003", "ParentID": "D002", "Name": "前端组"} ] ``` #### 2. **CSV格式**（适合大数据量场景[^3]） ```csv ID,ParentID,Name,Leader,Extra D001,,总部,李四,"{""budget"":1000}" D002,D001,技术中心,王五,"{""projects"":5}" D003,D002,前端组,张三,"{""skills"":[""React"",""Vue""]}" ``` --- ### 三、数据导入建议 1. **编码规范** - 使用`UTF-8`编码避免乱码 - CSV文件建议去除BOM头（Excel生成时需注意） 2. **数据校验规则** ```python # 示例校验逻辑（Python伪代码） def validate_data(row): assert row["ID"] not in existing_ids, "ID重复" if row["ParentID"]: assert row["ParentID"] in existing_ids, "无效ParentID" ``` 3. **性能优化** - 层级深度超过5级时，优先选择扁平结构 - 单文件超过10万行推荐分表存储[^3] --- ### 四、JSON与CSV格式对比 | 特性 | JSON | CSV | |----------------|--------------------------------|-----------------------| | **数据结构** | 支持嵌套、类型丰富 | 仅支持扁平化表格 | | **可读性** | 高（可视化工具友好） | 中（需表头说明） | | **存储效率** | 低（元数据冗余）[^3] | 高（体积减少50%-90%） | | **处理速度** | 慢（需解析嵌套） | 快（逐行读取） | | **典型场景** | 复杂组织架构、API接口 | 批量导入、ETL流程 | --- ### 五、扩展应用场景 1. **与VBA代码集成** ```vba ' 从CSV加载数据示例 Sub LoadCSVData() Dim csvPath As String csvPath = ThisWorkbook.Path & "\departments.csv" ImportCSVToNodes csvPath, nodesCollection End Sub ``` 2. **动态生成组织架构图** - 根据`Depth`字段自动计算节点位置 - 通过`ParentID`绑定连接关系（参考树形布局公式）[^1] ---