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

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.

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

[
  {
    "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

• v1.0.3 Webpack configuration fixed
• v.1.0.2 Package.json configuration fixed
• v.1.0.0 Initial release

Contributing

I'd be very happy if you feedback any issue