JavaScript通过父节点ID递归生成JSON树:
· 实现思路:通过递归实现(第一次递归的时候查询出所有的父节点,然后通过当前父节点id不断地去查询所有子节点,直到递归完毕返回)
 
· 代码示例:
// 模拟数据
const ary = [
{ id: '1', name: '11', parent_id: '' },
{ id: '2', name: '22', parent_id: '' },
{ id: '3', name: '33', parent_id: '' },
{ id: '11', name: '11-11', parent_id: '1' },
{ id: '12', name: '11-12', parent_id: '1' },
{ id: '21', name: '22-21', parent_id: '2' },
{ id: '31', name: '33-31', parent_id: '3' },
] /**
* 递归通过父节点ID生成树结构
* 思路:
* 1. 第一次递归的时候查询出所有的父节点
* 2. 然后通过当前父节点id不断地去查询所有子节点,直到递归完毕返回
* @param {String} pid 父节点id
*/
function getTrees(pid='') {
if(!pid) {
// 如果没有父id(第一次递归的时候)将所有父级查询出来
return ary.filter(item => !item.parent_id).map(item => {
// 通过父节点ID查询所有子节点
item.children = getTrees(item.id)
return item
})
} else {
return ary.filter(item => item.parent_id === pid).map(item => {
// 通过父节点ID查询所有子节点
item.children = getTrees(item.id)
return item
})
}
} console.log(getTrees())
/** 输出:
* [{
* id: "1",
* name: "11",
* parent_id: 0,
* children: [
* {
* id: "11",
* name: "11-11",
* parent_id: '1',
* }
* ]
* },......]
*/

  

-- 有志者自有千计万计,无志者只感千难万难。 --

JavaScript通过父节点ID递归生成JSON树的更多相关文章

  1. vue_elementUI_ tree树形控件 获取选中的父节点ID

    el-tree 的 this.$refs.tree.getCheckedKeys() 只可以获取选中的id 无法获取选中的父节点ID想要获取选中父节点的id;需要如下操作1. 找到工程下的node_m ...

  2. Element ui tree树形控件获取当前节点id和父节点id

    低版本Element ui tree树形控件获取当前节点id和父节点id的方法:点击查看 最新版本Element ui tree树形控件获取当前节点id和父节点id教程: 1.找到node_modul ...

  3. C#递归生成HTML树,C#递归生成xml树

    C#递归生成HTML树 public StringBuilder str = new StringBuilder();   //定义一个字符串 private void get_navigation_ ...

  4. 递归遍历JSON树

    递归遍历JSON树 前几天有个人问我,json串的层级无限深,但在json串中的key是已知的,在json串中的value,有些事Object,有些是Array,如何把这些层级无限深的key所对应的v ...

  5. ELementUI 树形控件tree 获取子节点同时获取半选择状态的父节点ID

    使用element-ui  tree树形控件的时候,在选择一个子节点后,使用getCheckedKeys 后,发现只能返回子节点的ID,但是其父节点ID没有返回. 解决办法有三种: 1.element ...

  6. 总结获取原生JS(javascript)的父节点、子节点、兄弟节点

    关于原生JS获取节点,一直是个头疼的问题,而且调用方法的名字又贼长了,所以我选择用JQ,好像跑题了-- 话不多说看代码 获取父节点 及 父节点下所有子节点(兄弟节点) <ul> <l ...

  7. Element ui tree树形控件获取父节点id

    Element-ui官网给的方法 getCheckedKeys() { console.log(this.$refs.tree.getCheckedKeys()); }, 这种只有在所有子级都被选中的 ...

  8. c# 根据父节点id,找到所有的子节点数据

    转自:https://blog.csdn.net/q107770540/article/details/7708418 查的是表 Model_info中父节点为p_id时找到所有的子节点的集合 //通 ...

  9. [TimLinux] JavaScript 阻止父节点接收子节点事件的方法

    1. 事件 两种类型的事件:触发式.冒泡式 2. 冒泡式 触发式:事件从DOM结构的顶层往下走的事件触发过程: 冒泡式:事件从DOM结构的底层往上走的事件触发过程. 3. 父子节点 当父.子节点同时对 ...

随机推荐

  1. SQL Server 数据库添加主键,唯一键,外键约束脚本

    -- 声明使用数据库use 数据库;go -- 添加主键(primary key)约束-- 基本语法-- 判断主键约束是否存在,如果存在则删除,不存在则添加if exists(select * fro ...

  2. EFCore:关于DDD中值对象(Owns)无法更新数值

    最近使用DDD+EFCore时,使用EFCore提供的OwnsOne或者OwnsMany关联值对象保存数据,没想到遇到一个很奇怪的问题:值对象中的值竟然无法被EFCore保存!也没有抛出任何异常!我瞬 ...

  3. JMeter_分布式压测配置

    前置条件 电脑A,电脑B,电脑C均安装相同版本的JMeter 和JDK.其中电脑A作为控制机,电脑B和电脑C作为施压机 电脑A IP:172.16.0.114 电脑B IP:172.16.0.115 ...

  4. Python之路 - Day4 - Python基础4 (新版)

    本节内容 迭代器&生成器 装饰器 Json & pickle 数据序列化 软件目录结构规范 作业:ATM项目开发 1.列表生成式,迭代器&生成器 列表生成式 孩子,我现在有个需 ...

  5. 上传自己的pip模块

    对于模块开发者本质上需要做3件事: 编写模块 将模块进行打包 上传到PyPI(需要先注册PyPI账号) 注册PyPI账号 安装上传工具 基于工具进行上传 对于模块的使用者来说,只需要做2件事: 通过p ...

  6. 微服务架构攀登之路(二)之RPC

    1. RPC 简介 远程过程调用(Remote Procedure Call,RPC)是一个计算机通信协议 该协议允许运行于一台计算机的程序调用另一台计算机的子程序,而程序员无需额外地为这个交互作用编 ...

  7. JavaWeb中Cookie会话管理,理解Http无状态处理机制

    注:图片如果损坏,点击文章链接:https://www.toutiao.com/i6512995108961387015/ 1.<Servlet简单实现开发部署过程> 2.<Serv ...

  8. IDEA开启热部署

    双击shift,查找Registry

  9. mongodb基础整理篇————常规操作[二]

    前言 简单整理一下常规操作. 正文 虽然一般说写代码看的是思想,但是呢,如果不知道mongodb 有哪些常用的操作,那么你怎么能知道mongodb是否符合你的需求,比如说如果聚合功能都没有,你得自己写 ...

  10. markdown mermaid流程图

    流程图 所有流程图都由节点.几何图像.箭头或线条组成. mermaid代码定义了这些节点和边的制作和交互方式.可以有不同的箭头类型.多向箭头以及与子图的连接. 节点 节点 flowchart LR i ...