JavaScript通过父节点ID递归生成JSON树
// 模拟数据
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树的更多相关文章
- vue_elementUI_ tree树形控件 获取选中的父节点ID
el-tree 的 this.$refs.tree.getCheckedKeys() 只可以获取选中的id 无法获取选中的父节点ID想要获取选中父节点的id;需要如下操作1. 找到工程下的node_m ...
- Element ui tree树形控件获取当前节点id和父节点id
低版本Element ui tree树形控件获取当前节点id和父节点id的方法:点击查看 最新版本Element ui tree树形控件获取当前节点id和父节点id教程: 1.找到node_modul ...
- C#递归生成HTML树,C#递归生成xml树
C#递归生成HTML树 public StringBuilder str = new StringBuilder(); //定义一个字符串 private void get_navigation_ ...
- 递归遍历JSON树
递归遍历JSON树 前几天有个人问我,json串的层级无限深,但在json串中的key是已知的,在json串中的value,有些事Object,有些是Array,如何把这些层级无限深的key所对应的v ...
- ELementUI 树形控件tree 获取子节点同时获取半选择状态的父节点ID
使用element-ui tree树形控件的时候,在选择一个子节点后,使用getCheckedKeys 后,发现只能返回子节点的ID,但是其父节点ID没有返回. 解决办法有三种: 1.element ...
- 总结获取原生JS(javascript)的父节点、子节点、兄弟节点
关于原生JS获取节点,一直是个头疼的问题,而且调用方法的名字又贼长了,所以我选择用JQ,好像跑题了-- 话不多说看代码 获取父节点 及 父节点下所有子节点(兄弟节点) <ul> <l ...
- Element ui tree树形控件获取父节点id
Element-ui官网给的方法 getCheckedKeys() { console.log(this.$refs.tree.getCheckedKeys()); }, 这种只有在所有子级都被选中的 ...
- c# 根据父节点id,找到所有的子节点数据
转自:https://blog.csdn.net/q107770540/article/details/7708418 查的是表 Model_info中父节点为p_id时找到所有的子节点的集合 //通 ...
- [TimLinux] JavaScript 阻止父节点接收子节点事件的方法
1. 事件 两种类型的事件:触发式.冒泡式 2. 冒泡式 触发式:事件从DOM结构的顶层往下走的事件触发过程: 冒泡式:事件从DOM结构的底层往上走的事件触发过程. 3. 父子节点 当父.子节点同时对 ...
随机推荐
- 【LeetCode】50. Pow(x, n) 解题报告(Python)
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述: 题目大意 解题方法 递归 迭代 日期 题目地址: https://le ...
- 【LeetCode】238. Product of Array Except Self 解题报告(Python & C++)
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 解题方法 两次遍历 日期 题目地址:https://leetcode.c ...
- 海康威视摄像机Java SDK拉流(二)开启关闭实时预览
本篇介绍海康威视摄像机通过SDK开启关闭实时预览接口 下篇介绍实时预览的回调函数及解码库 测试环境: 系统:Centos 7 SDK:设备网络SDK Linux64 实时预览模块流程: 图中虚线框部分 ...
- 编写Java程序,将一个int型数组拼接成字符串
返回本章节 返回作业目录 需求说明: 将一个int数组中的元素拼接成int元素以逗号分隔字符串. 实现思路: 定义一个数组变量int[] arrs = {12,21,33,9,2}. 定义一个方法ar ...
- Zookeeper集群安装(开启kerberos)
安装规划 zookeeper集群模式,安装到如下三台机器 10.43.159.237 zdh-237 10.43.159.238 zdh-238 10.43.159.239 zdh-239 Kerbe ...
- 基于CentOS7.x gitlab环境搭建,卸载,汉化 --搭建篇
gitlab环境搭建,卸载,汉化 --搭建篇 环境搭建 安装依赖软件 yum -y install policycoreutils openssh-server openssh-clients pos ...
- Servlet全局信息共享域对象ServletContext
注:图片如果损坏,点击文章链接:https://www.toutiao.com/i6512672630875619853/ 1.<Servlet简单实现开发部署过程> 2.<Serv ...
- SparkSQL学习笔记
概述 冠状病毒来临,宅在家中给国家做贡献之际,写一篇随笔记录SparkSQL的学习笔记,目的有二,一是记录整理之前的知识作为备忘录,二是分享技术,大家共同进步,有问题也希望大家不吝赐教.总体而言,大数 ...
- xray与burp联动被动扫描
最近也是刚实习了几天,看见带我的那位老哥在用xray,而且贼溜,所以我想写几篇关于xray的使用的文章 0x00 xray建立监听 在实际测试过程中,除了被动扫描,也时常需要手工测试.这里使用 Bur ...
- 服务器表单字符串转化Vue表单挂在到对应DOM节点
今天在项目开发中,遇到从后端返回的vue文件(包含template,js,css)的文件,试过用v-html解析文件,渲染到页面,但是无法渲染,后来去查了一堆资料,自己写了一个全局方法来解析这类文件 ...