jfliapp/json-tree

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

JSON-Tree

把扁平化的数据构建成结构化的 JSON 或者把结构化的数据扁平化

安装

npm install --save @aximario/json-tree

API

construct(data, config)

construct 会自动过滤掉 null 和 undefined 值

• data: 数组，扁平化的数据
• config: 配置对象
  • id 数据里的 id，string 类型
  • pid 数据里的父 id，string 类型
  • children 生成结果中子节点的字段名，string 类型
• 返回一个数组对象，里面可能包含多个树结构

destruct(data, config)

destruct 会自动过滤掉 null 和 undefined 值

• data: 数组或者树型对象，结构化的数据
• config: 配置对象
  • id 数据里的 id，string 类型，默认为 'id'
  • pid 数据里添加的父 id 信息，string 类型，默认为 'pid'
  • children 生成结果中子节点的字段名，string 类型，默认为 'children'
• 返回一个数组对象，里面为展开的数据

用法

import { construct, destruct } from '@aximario/json-tree';

const data = [
	{id: 6, parent_id: 2, data: '这是其他数据'},
	{id: 7, parent_id: 3, data: '这是其他数据'},
	{id: 2, parent_id: 1, data: '这是其他数据'},
	{id: 4, parent_id: 2, data: '这是其他数据'},
	{id: 1, parent_id: 0, data: '这是其他数据'},
	{id: 9, parent_id: 5, data: '这是其他数据'},
	{id: 8, parent_id: 3, data: '这是其他数据'},
	{id: 3, parent_id: 1, data: '这是其他数据'},
	{id: 5, parent_id: 2, data: '这是其他数据'},
	{id: 10, parent_id:6, data: '这是其他数据'}
];

const result = construct(data, {
	id: 'id',
	pid: 'parent_id',
	children: 'kids'
});

console.log(JSON.stringify(result, null, '\t'));

/** 结果
[
	{
		"id": 1,
		"parent_id": 0,
		"data": "这是其他数据",
		"kids": [
			{
				"id": 2,
				"parent_id": 1,
				"data": "这是其他数据",
				"kids": [
					{
						"id": 6,
						"parent_id": 2,
						"data": "这是其他数据",
						"kids": [
							{
								"id": 10,
								"parent_id": 6,
								"data": "这是其他数据"
							}
						]
					},
					{
						"id": 4,
						"parent_id": 2,
						"data": "这是其他数据"
					},
					{
						"id": 5,
						"parent_id": 2,
						"data": "这是其他数据",
						"kids": [
							{
								"id": 9,
								"parent_id": 5,
								"data": "这是其他数据"
							}
						]
					}
				]
			},
			{
				"id": 3,
				"parent_id": 1,
				"data": "这是其他数据",
				"kids": [
					{
						"id": 7,
						"parent_id": 3,
						"data": "这是其他数据"
					},
					{
						"id": 8,
						"parent_id": 3,
						"data": "这是其他数据"
					}
				]
			}
		]
	}
]
*/

const data2 = [
	{
		"id": 1,
		"data": "这是其他数据",
		"kids": [
			{
				"id": 2,
				"data": "这是其他数据",
				"kids": [
					{
						"id": 6,
						"data": "这是其他数据",
						"kids": [
							{
								"id": 10,
								"parent_id": 6,
								"data": "这是其他数据"
							}
						]
					},
					{
						"id": 4,
						"data": "这是其他数据"
					},
					{
						"id": 5,
						"data": "这是其他数据",
						"kids": [
							{
								"id": 9,
								"data": "这是其他数据"
							}
						]
					}
				]
			},
			{
				"id": 3,
				"data": "这是其他数据",
				"kids": [
					{
						"id": 7,
						"data": "这是其他数据"
					},
					{
						"id": 8,
						"data": "这是其他数据"
					}
				]
			}
		]
	}
];

const destructedData = destruct(data2, {
	pid: 'parent_id', // 展开后的父节点 id 名称
	children: 'kids', // 子节点名称
})

console.log(destructedData)
/**
[
	{ id: 6, parent_id: 2, data: '这是其他数据' },
	{ id: 7, parent_id: 3, data: '这是其他数据' },
	{ id: 2, parent_id: 1, data: '这是其他数据' },
	{ id: 4, parent_id: 2, data: '这是其他数据' },
	{ id: 1, parent_id: null, data: '这是其他数据' },
	{ id: 9, parent_id: 5, data: '这是其他数据' },
	{ id: 8, parent_id: 3, data: '这是其他数据' },
	{ id: 3, parent_id: 1, data: '这是其他数据' },
	{ id: 5, parent_id: 2, data: '这是其他数据' },
	{ id: 10, parent_id: 6, data: '这是其他数据' }
]
 */