Package Exports

@aximario/json-tree

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@aximario/json-tree) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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'
- mode 选择解构的结果集，all（默认）: 所有节点，root: 只返回根节点，leaf: 只返回叶节点，branch: 返回分支节点（不包含 root 节点），nonleaf: 返回根节点和分支节点
返回一个数组对象，里面为展开的数据

用法

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: '这是其他数据' }
]
 */