Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/cheton/flattree
Convert hierarchical tree structure to flat structure.
https://github.com/cheton/flattree
Last synced: 10 days ago
JSON representation
Convert hierarchical tree structure to flat structure.
- Host: GitHub
- URL: https://github.com/cheton/flattree
- Owner: cheton
- License: mit
- Created: 2016-03-23T07:35:39.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2021-11-21T14:17:48.000Z (almost 3 years ago)
- Last Synced: 2024-10-30T00:00:13.056Z (20 days ago)
- Language: JavaScript
- Homepage:
- Size: 72.3 KB
- Stars: 31
- Watchers: 3
- Forks: 7
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# flattree [](https://github.com/cheton/flattree/actions/workflows/node.js.yml) [](https://codecov.io/gh/cheton/flattree)
[](https://www.npmjs.com/package/flattree)
Convert hierarchical tree structure to flat structure.
With a flat structure, it allows you to scroll a large tree easily with virtualization.
Check out [infinite-tree](https://github.com/cheton/infinite-tree) to see how it integrated with [FlatTree](https://github.com/cheton/flattree).
## Installation
```bash
npm install --save flattree
```
## Examples
Given a hierarchical tree structure like [this](https://github.com/cheton/flattree/blob/master/test/fixtures/tree.json), you can build a tree in any form. For example:
### Flat List View
File: [examples/test1.js](https://github.com/cheton/flattree/blob/master/examples/tree1.js)
```
: path=".0", parent="", children=2, total=11, depth=0, prefix="0", open=1, lastChild=1
Alpha: path=".0.0", parent=".0", children=0, total=0, depth=1, prefix="00", open=0, lastChild=0
Bravo: path=".0.1", parent=".0", children=3, total=9, depth=1, prefix="00", open=1, lastChild=1
Charlie: path=".0.1.0", parent=".0.1", children=2, total=4, depth=2, prefix="000", open=1, lastChild=0
Delta: path=".0.1.0.0", parent=".0.1.0", children=2, total=2, depth=3, prefix="0001", open=1, lastChild=0
Echo: path=".0.1.0.0.0", parent=".0.1.0.0", children=0, total=0, depth=4, prefix="00011", open=0, lastChild=0
Foxtrot: path=".0.1.0.0.1", parent=".0.1.0.0", children=0, total=0, depth=4, prefix="00011", open=0, lastChild=1
Golf: path=".0.1.0.1", parent=".0.1.0", children=0, total=0, depth=3, prefix="0001", open=0, lastChild=1
Hotel: path=".0.1.1", parent=".0.1", children=1, total=2, depth=2, prefix="000", open=1, lastChild=0
India: path=".0.1.1.0", parent=".0.1.1", children=1, total=1, depth=3, prefix="0001", open=1, lastChild=1
Juliet: path=".0.1.1.0.0", parent=".0.1.1.0", children=0, total=0, depth=4, prefix="00010", open=0, lastChild=1
Kilo: path=".0.1.2", parent=".0.1", children=0, total=0, depth=2, prefix="000", open=0, lastChild=1
```
### Nested Hierarchy
File: [examples/test2.js](https://github.com/cheton/flattree/blob/master/examples/tree2.js)
```
(.0)
├── Alpha (.0.0)
└─┬ Bravo (.0.1)
├─┬ Charlie (.0.1.0)
| ├─┬ Delta (.0.1.0.0)
| | ├── Echo (.0.1.0.0.0)
| | └── Foxtrot (.0.1.0.0.1)
| └── Golf (.0.1.0.1)
├─┬ Hotel (.0.1.1)
| └─┬ India (.0.1.1.0)
| └── Juliet (.0.1.1.0.0)
└── Kilo (.0.1.2)
```
### Single Root Node
File: [examples/test3.js](https://github.com/cheton/flattree/blob/master/examples/tree3.js)
```
- (.0)
Alpha (.0.0)
- Bravo (.0.1)
- Charlie (.0.1.0)
+ Delta (.0.1.0.0)
Golf (.0.1.0.1)
- Hotel (.0.1.1)
- India (.0.1.1.0)
Juliet (.0.1.1.0.0)
Kilo (.0.1.2)
```
### Multiple Root Nodes
File: [examples/test4.js](https://github.com/cheton/flattree/blob/master/examples/tree4.js)
```
Alpha (.0)
- Bravo (.1)
- Charlie (.1.0)
+ Delta (.1.0.0)
Golf (.1.0.1)
- Hotel (.1.1)
- India (.1.1.0)
Juliet (.1.1.0.0)
Kilo (.1.2)
```
## Usage
```js
var flatten = require('flattree').flatten;
var tree = { // tree can either be object or array
id: 'fruit',
label: 'Fruit',
children: [
{ id: 'apple', label: 'Apple' },
{ id: 'banana', label: 'Banana', children: [{ id: 'cherry', label: 'Cherry' }] }
]
};
flatten(tree, {
openNodes: ['fruit', 'banana'],
openAllNodes: false, // Defaults to false
throwOnEerror: false // Defaults to false
});
// → [Node { id: 'fruit', ...}, Node { id: 'apple', ...}, Node { id: 'banana', ...}, Node { id: 'cherry', ...}]
```
This demostrates how to open a node and rebuild the tree:
```js
var _ = require('lodash');
var flatten = require('flattree').flatten;
// Create the list
var nodes = flatten(require('./test/fixtures/tree.json'));
// → [Node { id: 'fruit', ...}]
// Find the first node with an id attribute that equals to 'fruit'
var index = _.findIndex(nodes, { 'id': 'fruit' });
var node = nodes[index];
var siblingNodes = flatten(node.children, { openNodes: ['fruit'] });
// Insert an array inside another array
nodes.splice.apply(nodes, [index + 1, 0].concat(siblingNodes));
console.log(nodes);
// → [Node { id: 'fruit', ...}, Node { id: 'apple', ...}, Node { id: 'banana', ...}]
```
This demostrates how to close a node and rebuild the tree:
```js
var _ = require('lodash');
var flatten = require('flattree').flatten;
// Create the list
var nodes = flatten(require('./test/fixtures/tree.json'), { openAllNodes: true });
// → [Node { id: 'fruit', ...}, Node { id: 'apple', ...}, Node { id: 'banana', ...}, Node { id: 'cherry', ...}]
// Find the first node with an id attribute that equals to 'banana'
var index = _.findIndex(nodes, { 'id': 'banana' });
var node = nodes[index];
var deleteCount = node.state.total;
// Traversing up through ancestors to subtract node.state.total
var p = node;
while (p) {
p.state.total = (p.state.total - deleteCount);
p = p.parent;
}
// Remove elements from an array
nodes.splice(index + 1, deleteCount);
console.log(nodes);
// → [Node { id: 'fruit', ...}, Node { id: 'apple', ...}, Node { id: 'banana', ...}]
```
## API
https://github.com/cheton/flattree/wiki/API
## License
Copyright (c) 2016 Cheton Wu
Licensed under the [MIT License](LICENSE).