@axolo/tree-array NPM

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"
  }]
}]