{"id":18243191,"url":"https://github.com/scottwernervt/ember-cli-group-by","last_synced_at":"2025-04-04T12:30:50.219Z","repository":{"id":57223289,"uuid":"91720895","full_name":"scottwernervt/ember-cli-group-by","owner":"scottwernervt","description":"An Ember.js helper for grouping objects by async properties.","archived":false,"fork":false,"pushed_at":"2018-11-15T00:03:43.000Z","size":587,"stargazers_count":4,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-20T11:24:01.451Z","etag":null,"topics":["ember","ember-addon","ember-cli-addon","emberjs","groupby"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/scottwernervt.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-05-18T17:33:07.000Z","updated_at":"2020-09-09T03:35:09.000Z","dependencies_parsed_at":"2022-08-24T15:41:42.165Z","dependency_job_id":null,"html_url":"https://github.com/scottwernervt/ember-cli-group-by","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scottwernervt%2Fember-cli-group-by","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scottwernervt%2Fember-cli-group-by/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scottwernervt%2Fember-cli-group-by/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scottwernervt%2Fember-cli-group-by/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/scottwernervt","download_url":"https://codeload.github.com/scottwernervt/ember-cli-group-by/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247179452,"owners_count":20897043,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ember","ember-addon","ember-cli-addon","emberjs","groupby"],"created_at":"2024-11-05T08:03:39.302Z","updated_at":"2025-04-04T12:30:45.208Z","avatar_url":"https://github.com/scottwernervt.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ember-cli-group-by\n\n[![Latest NPM release][npm-badge]][npm-badge-url]\n[![License][license-badge]][license-badge-url]\n[![TravisCI Build Status][travis-badge]][travis-badge-url]\n[![Ember Observer Score][ember-observer-badge]][ember-observer-badge-url]\n[![Code Climate][codeclimate-badge]][codeclimate-badge-url]\n[![Dependencies][dependencies-badge]][dependencies-badge-url] \n[![Dev Dependencies][devDependencies-badge]][devDependencies-badge-url]\n\n[npm-badge]: https://img.shields.io/npm/v/ember-cli-group-by.svg\n[npm-badge-url]: https://www.npmjs.com/package/ember-cli-group-by\n[travis-badge]: https://img.shields.io/travis/scottwernervt/ember-cli-group-by/master.svg\n[travis-badge-url]: https://travis-ci.org/scottwernervt/ember-cli-group-by\n[codeclimate-badge]: https://api.codeclimate.com/v1/badges/24b82ae0cd54584332e2/maintainability\n[codeclimate-badge-url]: https://codeclimate.com/github/scottwernervt/ember-cli-group-by\n[ember-observer-badge]: http://emberobserver.com/badges/ember-cli-group-by.svg\n[ember-observer-badge-url]: http://emberobserver.com/addons/ember-cli-group-by\n[license-badge]: https://img.shields.io/npm/l/ember-cli-group-by.svg\n[license-badge-url]: LICENSE.md\n[dependencies-badge]: https://david-dm.org/scottwernervt/ember-cli-group-by.svg\n[dependencies-badge-url]: https://david-dm.org/scottwernervt/ember-cli-group-by\n[devDependencies-badge]: https://david-dm.org/scottwernervt/ember-cli-group-by/dev-status.svg?theme=shields.io\n[devDependencies-badge-url]: https://david-dm.org/scottwernervt/ember-cli-group-by?type=dev\n\nA group by computed property and helper that supports nested properties, e.g. model with a \n`belongsTo` relationship.\n\n```javascript\nimport Controller from '@ember/controller';\nimport { groupByPath } from 'ember-cli-group-by/macros';\n\nexport default Controller.extend({\n  arrayGrouped: groupByPath('array', 'nested.property'),\n});\n```\n\n```handlebars\n{{#each-in (group-by-path array \"nested.property\") as |category items|}}\n  \u003ch3\u003e{{category}}\u003c/h3\u003e\n  \u003cul\u003e\n    {{#each items as |item|}}\n    \t\u003cli\u003e{{item.name}}\u003c/li\u003e\n    {{/each}}\n  \u003c/ul\u003e\n{{/each-in}}\n```\n\n## Installation\n\nRequires Ember 2.10 or higher, see \n[Issue #2](https://github.com/scottwernervt/ember-cli-group-by/issues/2).\n\n```no-highlight\nember install ember-cli-group-by\n```\n\n## Usage\n\n### General\n\n**Computed property**\n\n```javascript\nimport Controller from '@ember/controller';\nimport { A } from '@ember/array';\nimport { groupByPath } from 'ember-cli-group-by/macros';\n\nexport default Controller.extend({\n  cartGrouped: groupByPath('cart', 'category'),\n  \n  init() {\n    this._super(...arguments);\n    this.set('cart', A([\n      { name: 'Cinnamon ', category: 'Spice' },\n      { name: 'Banana', category: 'Fruit' },\n      { name: 'Apple', category: 'Fruit' },\n      { name: 'Lettuce', category: 'Vegetable' },\n      { name: 'Broccoli', category: 'Vegetable' },\n    ]);\n  },\n});\n```\n\n```handlebars\n{{#each-in cartGrouped as |category products|}}\n  \u003ch3\u003e{{category}}\u003c/h3\u003e\n  \u003cul\u003e\n    {{#each products as |product|}}\n    \t\u003cli\u003e{{product.name}}\u003c/li\u003e\n    {{/each}}\n  \u003c/ul\u003e\n{{/each-in}}\n```\n\n**Handlebars helper**\n\n```javascript\nimport Controller from '@ember/controller';\nimport { A } from '@ember/array';\n\nexport default Controller.extend({\n  init() {\n    this._super(...arguments);\n    this.set('cart', A([\n      { name: 'Cinnamon ', category: 'Spice' },\n      { name: 'Banana', category: 'Fruit' },\n      { name: 'Apple', category: 'Fruit' },\n      { name: 'Lettuce', category: 'Vegetable' },\n      { name: 'Broccoli', category: 'Vegetable' },\n    ]);\n  },\n});\n```\n\n```handlebars\n{{#each-in (group-by-path cart \"category\") as |category products|}}\n  \u003ch3\u003e{{category}}\u003c/h3\u003e\n  \u003cul\u003e\n    {{#each products as |product|}}\n    \t\u003cli\u003e{{product.name}}\u003c/li\u003e\n    {{/each}}\n  \u003c/ul\u003e\n{{/each-in}}\n```\n\n### Default Category\n\nThe group name for an item can be overridden by implementing a computed property function or by \npassing a closure action to the helper.\n\n**Computed property**\n\n```javascript\nimport Controller from '@ember/controller';\nimport { A } from '@ember/array';\nimport { isNone } from '@ember/utils';\nimport { groupByPath } from 'ember-cli-group-by/macros';\n\nexport default Controller.extend({\n  cartGrouped: groupByPath('cart', 'category', function (value) {\n    return isNone(value) ? 'Other' :  value;\n  }),\n  \n  init() {\n    this._super(...arguments);\n    this.set('cart', A([\n      { name: 'Cinnamon ', category: 'Spice' },\n      { name: 'Banana', category: 'Fruit' },\n      { name: 'Apple', category: 'Fruit' },\n      { name: 'Lettuce', category: 'Vegetable' },\n      { name: 'Broccoli', category: 'Vegetable' },\n      { name: 'Salt', category: null },\n      { name: 'Sugar' },\n    ]);\n  },\n});\n```\n\n**Handlebars helper**\n\n```javascript\nimport Controller from '@ember/controller';\nimport { A } from '@ember/array';\nimport { isNone } from '@ember/utils';\n\nexport default Controller.extend({\n  init() {\n    this._super(...arguments);\n    this.set('cart', A([\n      { name: 'Cinnamon ', category: 'Spice' },\n      { name: 'Banana', category: 'Fruit' },\n      { name: 'Apple', category: 'Fruit' },\n      { name: 'Lettuce', category: 'Vegetable' },\n      { name: 'Broccoli', category: 'Vegetable' },\n      { name: 'Salt', category: null },\n      { name: 'Sugar' },\n    ]);\n  },\n  \n  actions: {\n    defaultCategory(value) {\n      return isNone(value) ? 'Other' :  value;\n    },\n  },\n});\n```\n\n```handlebars\n{{#each-in (group-by-path cart \"category\" (action \"defaultCategory\")) as |category products|}}\n  \u003ch3\u003e{{category}}\u003c/h3\u003e\n  \u003cul\u003e\n    {{#each products as |product|}}\n    \t\u003cli\u003e{{product.name}}\u003c/li\u003e\n    {{/each}}\n  \u003c/ul\u003e\n{{/each-in}}\n```\n\n### Async Relationship Property\n\nThe group by property path can be a nested `belongsTo` relationship that is loaded asynchronously. \nCheck out the example at [ember-twiddle](https://ember-twiddle.com/caf15c9b204e04123d6b1e5e7a06ad3a).\n\n```javascript\n// models/user.js\nexport default Model.extend({\n  fullname: attr('string'),\n  \n  cart: hasMany('product', { inverse: 'shopper' }),\n});\n\n// models/product.js\nexport default Model.extend({\n  name: attr('string'),\n  \n  category: belongsTo('category'),\n  shopper: belongsTo('user', { inverse: 'cart' }),\n});\n\n// models/category.js\nexport default Model.extend({\n  name: attr('string'),\n});\n```\n\n```javascript\nimport Controller from '@ember/controller';\nimport { isNone } from '@ember/utils';\nimport { alias } from '@ember/object/computed';\nimport { groupByPath } from 'ember-cli-group-by/macros';\n\nexport default Controller.extend({\n  user: alias('model'),\n  cart: alias('user.cart'),\n  cartGrouped: groupByPath('cart', 'category.name', function (value) {\n    return isNone(value) ? 'Other' :  value;\n  }),\n});\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscottwernervt%2Fember-cli-group-by","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fscottwernervt%2Fember-cli-group-by","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscottwernervt%2Fember-cli-group-by/lists"}