递归系列——树型JSON数据转换问题
JSON数据转换方式:
1.标准结构=>简单结构
var root = {
id: 'root',
children: [
{
id: "1",
children: [
{ id: "1-1", children: [] },
{ id: "1-2", children: [] }
]
},
{
id: "2",
children: [
{ id: "2-1", children: [] },
{ id: "2-2", children: [] }
]
}
]
};
function transform(data, array, parent){
var node = {};
node.id = data.id;
node.pid = parent;
array.push(node);
data.children.forEach(function(value){
transform(value,array,data.id);
})
return array;
}
console.log(transform(root,[],null));
输出如下:

2.简单结构=>标准结构
var data = [
{ id: "root", pid: null },
{ id: "", pid: "root" },
{ id: "1-1", pid: "" },
{ id: "1-2", pid: "" },
{ id: "", pid: "root" },
{ id: "2-1", pid: "" },
{ id: "2-2", pid: "" }
];
function transform(data, object){ //始终保证object有children属性
!object.children && (object.children = []);
data.forEach(function(value){
console.log(object);
if(value.pid == object.id){
//根节点处理
if (!value.pid) {
object.id = value.id; }else {
var node = {};
node.id = value.id;
object.children.push(node);
transform(data, node);
}
}
})
return object;
}
console.log(transform(data,{}));
输出如下:
{
children: [
{
id: ""
children: [
{
id: "1-1"
children: []
},
{
id: "1-2"
children: []
}]
},
{
id: ""
children: [
{
id: "2-1"
children: []
},
{
id: "2-2"
children: []
}]
}]
id: "root"
}
上述递归中都有数据的传递,这是一种accumulator技术。比如第一个函数中的array和第二个函数中data,递归过程中始终是同一个数据。
递归系列——树型JSON数据转换问题的更多相关文章
- vuejs学习--递归组件(树型表格分享)
前言 学习vue有一段时间了,最近使用vue做了一套后台管理系统,其中使用最多就是递归组件,也因为自己对官方文档的不熟悉使得自己踩了不少坑,今天写出来和大家一起分享. 递归组件 组件在它的模板内可以递 ...
- SQL递归获取树型路径中文名称
项目中遇到一个树型结构表要根据任意传入节点获取它从根节点一直到自身节点的全部路径的中文名称,并且用'>'与分隔. 我使用在sqlServer中写了一个解析函数方便开发调用. USE [RP_ER ...
- JavaScript:使用递归构建树型菜单
使用递归函数将扁平数据转为树型结构,并渲染到页面 效果图: 代码: <!DOCTYPE html> <html lang="en"> <head> ...
- 菜鸟笔记:node.js+mysql中将JSON数据构建为树(递归制作树状菜单数据接口)
初学Web端开发,今天是第一次将所学做随笔记录,肯定存在多处欠妥,望大家海涵:若有不足,望大家批评指正. 进实验室后分配到的第一个项目,需要制作一个不确定层级树形菜单的数据接口,对于从来没实战编过程的 ...
- 路径字符串数据转化为树型层级对象,path to json tree
由于项目中使用了react 及 ant-design ,在使用tree树型控件时,需要 类似下面的数据, const treeData = [{ title: '0-0', key: '0-0', c ...
- Rafy 领域实体框架 - 树型实体功能(自关联表)
在 Rafy 领域实体框架中,对自关联的实体结构做了特殊的处理,下面对这一功能进行讲解. 场景 在开发数据库应用程序时,往往会遇到自关联表的场景.例如,分类信息.组织架构中的部门.文件夹信息等,都 ...
- Mac:文件夹树型展示 tree
目标: 想要在MAC的Terminal中查看文件夹中所有文件的树型结构及文件夹.文件树统计. 安装方法: 1.brew安装 官网:http://brew.sh/ brew是Mac中安装软件的神器,一定 ...
- RDIFramework.NET V2.7 Web版本升手风琴+树型目录(2级+)方法
RDIFramework.NET V2.7 Web版本升手风琴+树型目录(2级+)方法 手风琴风格在Web应用非常的普遍,越来越多的Web应用都是采用这种方式来体现各个功能模块,传统的手风琴风格只支持 ...
- 树型动态规划(树形dp)
树型动态规划就是在“树”的数据结构上的动态规划,树型动态规划是建立在树上的,所以有二个方向: 1.根—>叶:这种题目基本上碰不到 2.叶->根:根的子节点传递有用的信息给根,完后根得出最优 ...
随机推荐
- 图像分割中的loss--处理数据极度不均衡的状况
序言: 对于小目标图像分割任务,一副图画中往往只有一两个目标,这样会加大网络训练难度,一般有三种方法解决: 1.选择合适的loss,对网络进行合理优化,关注较小的目标. 2.改变网络结构,使用atte ...
- 【转】 解释下浏览器是如何判断元素是否匹配某个 CSS 选择器?
先产生一个元素集合,然后从后往前判断: 浏览器先产生一个元素集合,这个集合往往由最后一个部分的索引产生(如果没有索引就是所有元素的集合).然后向上匹配,如果不符合上一个部分,就把元素从集合中删除,直到 ...
- 深入浅出 Java Concurrency (11): 锁机制 part 6 CyclicBarrier[转]
如果说CountDownLatch是一次性的,那么CyclicBarrier正好可以循环使用.它允许一组线程互相等待,直到到达某个公共屏障点 (common barrier point).所谓屏障点就 ...
- 约束布局ConstraintLayout加快布局速度
Android Studio2.2更新布局设计器,同时,引人了约束布局ConstraintLayout. 简单来说,可以把它看做是相对布局的升级版本,但是区别与相对布局更加强调约束.何为约束,即控件之 ...
- 观察者模式(Observer、Subject、ConcreteSubject、ConcreteObserver)(监护、订阅)
建立一种对象与对象之间的依赖关系,一个对象发生改变时将自动通知其他对象,其他对象将相应的作出反应. 在此发生改变的对象称之为观察目标(被观察者),而被通知的对象称为观察者,一个观察者目标可以对应多个观 ...
- Newtonsoft.json 二次引用出错解决办法
一.一般在C# 项目中二次引用会出现如下错误: 解决办法:用编辑器打开项目下的文件(*.csproj),可以找到在这个文件中,Newtonsoft.Json的引用,删掉引用,然后在项目中重新引用就可以 ...
- 【转载】Linux Examination
原博地址:https://blog.csdn.net/weixin_42568655/article/details/94603660 (来自我的同学QiaoGuangtong大佬) Fundamen ...
- JQuery学习:jquery对象和js对象区别和转换
JQuery对象与JS对象区别与转换 1.JQuery对象在操作时,更加方便 2.JQuery对象和js对象方法不通用 3.两者相互转换 * jq -- > js:jq对象[索引] 或者 ...
- MyEclipse使用总结——MyEclipse10.6 下添加jadClipse反编译插件[转]
jad是一个使用比较广泛的Java反编译软件,jadClipse是jad在eclipse下的插件,下面像大家介绍下如何将jadclipse加入到MyEclipse10.X,9.X,8.X,6.X等各版 ...
- Mac+Webstorm 双更新后 webstorm无法使用内置svn
我终于营业了!!!!!! EachTime!!!! 我更新了mac系统后,就会莫名其妙的webstorm的svn无法使用 具体表现为无法更新和提交 具体报错为:Can't use Subversion ...