Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/muratcatal/group-array-items
Group json items in array
https://github.com/muratcatal/group-array-items
array array-group array-json-group grouping json-group
Last synced: 21 days ago
JSON representation
Group json items in array
- Host: GitHub
- URL: https://github.com/muratcatal/group-array-items
- Owner: muratcatal
- License: mit
- Created: 2017-12-14T19:48:51.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2017-12-26T06:07:57.000Z (almost 7 years ago)
- Last Synced: 2024-10-15T13:20:18.765Z (about 1 month ago)
- Topics: array, array-group, array-json-group, grouping, json-group
- Language: JavaScript
- Homepage:
- Size: 46.9 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Group Array Items
----
This library helps you group json items in array. It has zero-dependency.
# How to install
----
##### Using npm
---
```
$ npm i --save group-array-items
```
##### Using yarn
---
```
$ yarn add group-array-items
```
##### Compiling source code
---
- 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
# How to use
----
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.
#### With default configuration file
```javascript
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);
```
#### With configuration file
To configure groupBy function, send a second json object as parameter.
```javascript
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 property `groupItem` 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.
#### Output of groupBy
You will have an output as below format
```javascript
[
{
"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"
}
]
}
]
```
# Configuration Description
----
> 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 |
# Change log
----
To access CHANGELOG.md file [click here](./CHANGELOG.md)
# Contributing
----
I'd be very happy if you feedback any issue