l2t - Convert List into Tree

Elegantly Convert List into Tree

Table of Content

• l2t - Convert List into Tree
  • Table of Content
  • Get Started
    • Install the package
    • Use with Javascript
    • Use with Typescript (rich typing support)
  • Contributing
    • Perquisites
    • Clone the repo
    • Install dependencies
    • Run test suite
  • License

Get Started

Install the package

• from NPM

npm install l2t

• or from Yarn

yarn add l2t

Use with Javascript

import listToTree from "lt2"; // with ES6 syntax:
// const { listToTree } = require("lt2"); // or with CommonJS syntax:

// a simple list of 6 items, three of which are children
const simpleList = [
  { id: "1", label: "1" },
  { id: "2", label: "2", parentId: "1" },
  { id: "3", label: "3", parentId: "1" },
  { id: "4", label: "4" },
  { id: "5", label: "5" },
  { id: "6", label: "6", parentId: "5" },
];

// convert the simple list into a tree
const tree = listToTree(
  // the list
  simpleList,
  // a function returns id of the item
  // or a string name of the id field e.g. 'id'
  (item) => item.id,
  // a function returns id of the item's parent
  // or a string name of the parent id field e.g. 'parentId'
  (item) => item.parentId,
  // key for storing children items if there are any
  "children",
  // a mapper function to map the item to whatever object you like
  (item) => {
    return {
      label: `item-number-${item.label}`, // let's modify the label and prepend "item-number-"
      index: item.id, // let's change id to index
    };
  },
);

// output the result
console.log(JSON.stringify(tree, null, 2));

the result:

[
  {
    "label": "item-number-1",
    "index": "1",
    "children": [
      {
        "label": "item-number-2",
        "index": "2",
        "children": []
      },
      {
        "label": "item-number-3",
        "index": "3",
        "children": []
      }
    ]
  },
  {
    "label": "item-number-4",
    "index": "4",
    "children": []
  },
  {
    "label": "item-number-5",
    "index": "5",
    "children": [
      {
        "label": "item-number-6",
        "index": "6",
        "children": []
      }
    ]
  }
]

Use with Typescript (rich typing support)

import { listToTree } from "lt2";
// import listToTree from "lt2"; // or with default import:

// List Item interface
interface SimpleItem {
  id: string;
  label: string;
  parentId?: string;
}
// Tree Node interface
interface SimpleNode {
  index: string;
  label: string;
  children: SimpleNode[];
}

// a simple list of 6 items, three of which are children
const simpleList: SimpleItem[] = [
  { id: "1", label: "1" },
  { id: "2", label: "2", parentId: "1" },
  { id: "3", label: "3", parentId: "1" },
  { id: "4", label: "4" },
  { id: "5", label: "5" },
  { id: "6", label: "6", parentId: "5" },
];

// convert the simple list into a tree
const tree = listToTree<SimpleItem, SimpleNode>(
  simpleList,
  // a function returns id of the item
  // or a string name of the id field e.g. 'id'
  (item) => item.id,
  // a function returns id of the item's parent
  // or a string name of the parent id field e.g. 'parentId'
  (item) => item.parentId,
  // key for storing children items if there are any, note that when using typescript,
  // this key has to be one of the keys in the node interface (SimpleNode in this case)
  "children",
  // a mapper function to map the item to whatever object you like
  (item) => {
    return {
      label: `item-number-${item.label}`, // let's modify the label and prepend "item-number-"
      index: item.id, // let's change id to index
    };
  },
);

this will give you the same result as the Javascript version.

Contributing

To get started see the contributing guidelines.

Unit test : Unit test are written in Jest. Please add/edit unit test(s) for every new feature or bug fix. yarn test to run the test suite.

Perquisites

Make sure you have:

• git
• nodejs 10 or higher
• yarn

Clone the repo

git clone https://github.com/ZibanPirate/l2t.git

Install dependencies

yarn

Run test suite

• Run once

yarn test

• Run in watch mode

yarn test --watch

• Run in watch mode with coverage report

yarn test --watch --coverage

License

Copyright (c) 2020 ZibanPirate (twitter: @ZibanPirate) Licensed under the MIT license.