This library helps you group json items in array. It has zero-dependency.
$ npm i --save group-array-items
$ yarn add group-array-items
- Download src code from github
- Open your cli and type
$ npm run build
or
$ yarn run build
- Get file in dist folder and referance it in your application
This helper function is configurable with a configuration parameter. However, if you want to use with default configuration, your json model must have a type
property for grouping and children
property is you have child objects needed to be grouped. But dont worry, each of them can be configured easily.
import groupBy from 'group-array-items'
let data = [
{
name: "My item 1",
type: "group-1",
children: [
{
name: "My item 1.1",
type: "group-1"
}, {
name: "My item 1.2",
type: "group-2"
}, {
name: "My item 1.3",
type: "group-1"
}
]
}, {
name: "My item 2",
type: "group-2"
}, {
name: "My item 3",
type: "group-1",
children: [
{
name: "My item 3.1",
type: "group-1",
children: [
{
name: "My item 3.1.1",
type: "group-3"
}, {
name: "My item 3.1.2",
type: "group-3"
}, {
name: "My item 3.1.3",
type: "group-4"
}
]
}, {
name: "My item 3.2",
type: "group-2"
}, {
name: "My item 3.3",
type: "group-1"
}
]
}
]
const result = groupBy(data);
To configure groupBy function, send a second json object as parameter.
const config = {
aliases: [
{
alias: "Group Name 1 Alias",
name: "group_name_1"
},
{
alias: "Group Name 2 Alias",
name: "group_name_2"
}
],
groupBy: "type",
childElement: "children",
prefix: "",
generateId: true
}
const result = groupBy(data,config);
When you grouped items,
groupBy
function generates a new item which has a boolean propertygroupItem
to indicate that item is an grouping-header-item. By default, that element's name is given to its group name however you can override that behaviour by giving to alias by configuration file.
You will have an output as below format
[
{
"name": "type-name-alias",
"groupItem": true, // shows that this json is an header generated by groupBy function
"type": "type-name",
"children": [
{
"name": "My item 1", // grouped item
"type": "group-1"
},
{
"name": "My item 1", // second grouped item
"type": "group-1"
}
]
}
]
You can configure groupBy function by sending any of configuration parameter to fit your needs.
Property | Type | Default Value | Description |
---|---|---|---|
aliases | array | empty | an array which holds alias for grouped headers. Format of that array item is: { alias: "A title which will be used for instead of group-type", name: "group-type" } Assume that you have group types gold ,silver and rock in your json type and you want to see in your group-header titles as My Gold , My Silver ,My Rock . { alias: "My Gold", name: "gold } |
groupBy | string | "type" | property which will be looked for grouping in json object |
childElement | string | children | property which will be looked for child elements in json object for deep grouping |
prefix | string | empty | string which will be appended to generated grouped header's groupBy propery |
generateId | boolean | true | unique id generate for each group header |
To access CHANGELOG.md file click here
I'd be very happy if you feedback any issue