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数据转换问题的更多相关文章

  1. vuejs学习--递归组件(树型表格分享)

    前言 学习vue有一段时间了,最近使用vue做了一套后台管理系统,其中使用最多就是递归组件,也因为自己对官方文档的不熟悉使得自己踩了不少坑,今天写出来和大家一起分享. 递归组件 组件在它的模板内可以递 ...

  2. SQL递归获取树型路径中文名称

    项目中遇到一个树型结构表要根据任意传入节点获取它从根节点一直到自身节点的全部路径的中文名称,并且用'>'与分隔. 我使用在sqlServer中写了一个解析函数方便开发调用. USE [RP_ER ...

  3. JavaScript:使用递归构建树型菜单

    使用递归函数将扁平数据转为树型结构,并渲染到页面 效果图: 代码: <!DOCTYPE html> <html lang="en"> <head> ...

  4. 菜鸟笔记:node.js+mysql中将JSON数据构建为树(递归制作树状菜单数据接口)

    初学Web端开发,今天是第一次将所学做随笔记录,肯定存在多处欠妥,望大家海涵:若有不足,望大家批评指正. 进实验室后分配到的第一个项目,需要制作一个不确定层级树形菜单的数据接口,对于从来没实战编过程的 ...

  5. 路径字符串数据转化为树型层级对象,path to json tree

    由于项目中使用了react 及 ant-design ,在使用tree树型控件时,需要 类似下面的数据, const treeData = [{ title: '0-0', key: '0-0', c ...

  6. Rafy 领域实体框架 - 树型实体功能(自关联表)

      在 Rafy 领域实体框架中,对自关联的实体结构做了特殊的处理,下面对这一功能进行讲解. 场景 在开发数据库应用程序时,往往会遇到自关联表的场景.例如,分类信息.组织架构中的部门.文件夹信息等,都 ...

  7. Mac:文件夹树型展示 tree

    目标: 想要在MAC的Terminal中查看文件夹中所有文件的树型结构及文件夹.文件树统计. 安装方法: 1.brew安装 官网:http://brew.sh/ brew是Mac中安装软件的神器,一定 ...

  8. RDIFramework.NET V2.7 Web版本升手风琴+树型目录(2级+)方法

    RDIFramework.NET V2.7 Web版本升手风琴+树型目录(2级+)方法 手风琴风格在Web应用非常的普遍,越来越多的Web应用都是采用这种方式来体现各个功能模块,传统的手风琴风格只支持 ...

  9. 树型动态规划(树形dp)

    树型动态规划就是在“树”的数据结构上的动态规划,树型动态规划是建立在树上的,所以有二个方向: 1.根—>叶:这种题目基本上碰不到 2.叶->根:根的子节点传递有用的信息给根,完后根得出最优 ...

随机推荐

  1. Windows API 第三篇

    1.获得程序自身的路径: DWORD GetModuleFileName( HMODULE hModule, // handle to module LPTSTR lpFilename, // pat ...

  2. 浪潮云+/云加 App 智能化的企业移动办公平台官网下载地址

    上Google?Facebook? 点这里: 手机端:https://ecm.inspur.com/ 桌面端:https://ecm.inspuronline.com/

  3. Vue基础知识梳理

    1. Vue 实例 1.1 创建一个Vue实例 一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例,以及可选的嵌套的.可复用的组件树组成.demo 1.2 数据与方法 数据的响应式渲 ...

  4. csp-s模拟测试51(b)attack,tree题解

    题面:https://www.cnblogs.com/Juve/articles/11598286.html attack: 支配树裸题? 看一下支配树是什么: 问题:我们有一个有向图(可以有环),定 ...

  5. vim 插入行号

    :let i=1000000|g/^/s//\=i.' '/|let i=i+1

  6. PAT甲级——A1035 Password

    To prepare for PAT, the judge sometimes has to generate random passwords for the users. The problem ...

  7. [原创]Machine Learning/机器学习 文章合集

    转载请注明出处:https://www.codelast.com/ ➤ 用人话解释机器学习中的Logistic Regression(逻辑回归) ➤ 如何防止softmax函数上溢出(overflow ...

  8. kuangbin带我飞QAQ 最短路

    1. poj 1502 Mathches Game 裸最短路 #include <iostream> #include <string.h> #include <cstd ...

  9. leetcode 352 & leetcode 239 & leetcode 295 & leetcode 53 & leetcode 209

    lc352 Data Stream as Disjoint Intervals 可以用treemap解 key保存interval的start,value保存interval的end.分别找出当前va ...

  10. 用js实现base64编码器

    base-64作为常见的编码函数,在基本认证.摘要认证以及一些HTTP扩展中得到了大量应用.在前端领域,也常常把图片转换为base-64编码在网络中传输.本文将详细介绍base64的原理及用js实现b ...