@axolo/tree-array

tree-array

An array have children key and parentId key like tree.

• Read docs for help more
• Use lodash.clonedeep to keep data raw
• May not be suitable for big data

install

npm i @axolo/tree-array

usage

import { tree2array, array2tree } from '@axolo/tree-array'
const tree = array2tree([/* array */])
const array = tree2array([/* tree */])

Vue CLI

By default babel-loader ignores all files inside node_modules. You can enable transpileDependencies to avoid unexpected untranspiled code from third-party dependencies.

// vue.config.js
module.exports = {
  transpileDependencies: ['@axolo/tree-array']
}

CommonJS

ES Modules is not supported in CommonJS. You can use UMD version.

const { tree2array, array2tree } = require('@axolo/tree-array/dist/index.umd.cjs')
const tree = array2tree(tree2array([/* tree */]))

api

function	return	description
randomId(prefix = '')	string	generate random id with prefix, like my_r85cvfpqp8
array2tree(array, [options])	array	array to tree with leaf and deep
arrayTrace(array, id, [options])	array	trace source of id from array
arrayDeep(array, [options], [deep = 1])	int	get max deep of array
arrayNode(array, id, [options])	array	get path of id from array by id, like [id1, id12, id121]
arrayParents(id, array, [options])	array	find parents from array by id
tree2array(tree, [options])	array	tree to array and generate id, parentId and leaf when undefined
treeFilter(tree, condition, [options])	array	get new tree filter by condition function like node => !node.hide
treeDeep(tree, [options], [deep = 1])	int	get max deep of tree
treeNode(tree, id, [options])	array	get path of id from tree by id, like [id1, id12, id121]
treePath(tree, id, [options])	array	get path of index from tree by id, like [0, 2, 1]
treeSub(tree, id, [options])	object	get sub tree by id, like { id, parentId, children: [] }

options

params	type	default	description
idKey	string	id	key of id
parentKey	string	parentId	key of parentId
childrenKey	string	children	key of children
leafKey	string	leaf	key of leaf
leafValue	any	true	value of leaf
deepKey	string	deep	key of deep
deepValue	number	0	value of deep

data

The data format MUST like example with key defined in options.

array

[{
  "id": "chart",
  "path": "/chart",
  "parentId": null
}, {
  "id": "chartIndex",
  "path": "/chart/index",
  "parentId": "chart"
}, {
  "id": "chartIndexActive",
  "path": "/chart/index/active",
  "parentId": "chartIndex"
}, {
  "id": "chartIndexActiveMy",
  "path": "/chart/index/active/my",
  "parentId": "chartIndexActive"
}, {
  "id": "chartReview",
  "path": "/chart/review",
  "parentId": "chart"
}, {
  "id": "chartProject",
  "path": "/chart/project",
  "parentId": "chart"
}, {
  "id": "smile",
  "path": "/smile",
  "parentId": null
}, {
  "id": "smileIndex",
  "path": "/smile/index",
  "test": true,
  "parentId": "smile"
}]

tree

[{
  "id": "chart",
  "path": "/chart",
  "parentId": null,
  "children": [{
    "id": "chartIndex",
    "path": "/chart/index",
    "parentId": "chart",
    "children": [{
      "id": "chartIndexActive",
      "path": "/chart/index/active",
      "parentId": "chartIndex",
      "children": [{
        "id": "chartIndexActiveMy",
        "path": "/chart/index/active/my",
        "parentId": "chartIndexActive"
      }]
    }]
  }, {
    "id": "chartReview",
    "path": "/chart/review",
    "parentId": "chart"
  }, {
    "id": "chartProject",
    "path": "/chart/project",
    "parentId": "chart"
  }]
}, {
  "id": "smile",
  "path": "/smile",
  "parentId": null,
  "children": [{
    "id": "smileIndex",
    "path": "/smile/index",
    "test": true,
    "parentId": "smile"
  }]
}]

Yueming Fang 2022-09-04