How to group an array by one of its object keys in JavaScript

Question

How to group the object using groupBy in angular

rowData = [
  {code: "Machine 1", date: "2019-01-19 02:00:00", assets: { PRN: 2}},
  {code: "Machine 2", date: "2019-01-20 00:00:00", assets: { PRN1: 2}},
  {code: "Machine 3", date: "2019-01-21 00:00:00", assets: { PRN: 2}},
  {code: "Machine 4", date: "2019-01-22 00:00:00", assets: { PRN1: 2}},
  {code: "Machine 5", date: "2019-01-23 00:00:00", assets: { PRN2: 2}}
]

group it into Object keys which is the PRN, PRN1, PRN2

the output should be

PRN: [{...}]
PRN1: [{...}]
PRN2: [{...}]

There is no groupBy in Angular, only in AngularJs, which is not what the tag in your question is about. — callback
– callback, Commented Dec 4, 2019 at 8:20
This can be solved in JavaScript/TypeScript and it's not related to Angular. — Tsvetan Ganev
– Tsvetan Ganev, Commented Dec 4, 2019 at 8:21
For Angular 2+ can use npmjs.com/package/ngx-pipes#groupby or lodash.com/docs/4.17.15#groupBy — callback
– callback, Commented Dec 4, 2019 at 8:23

Tsvetan Ganev · Accepted Answer · 2019-12-04 08:30:08Z

4

You don't need to use RxJS because you can do that with the built-in Array.reduce function.

rowData.reduce((groupedBy, row) => {
  // get the PRN/PRN1/PRN2 value
  const key = Object.keys(row.assets)[0];

  // create an array of rows belonging to the key
  // if it does not already exist
  if (!Array.isArray(groupedBy[key])) {
    groupedBy[key] = [];
  }

  // add the current row to the corresponding object key 
  groupedBy[key].push(row);
  return groupedBy;
}, {})

Result:

{
  "PRN": [
    {
      "code": "Machine 1",
      "date": "2019-01-19 02:00:00",
      "assets": {
        "PRN": 2
      }
    },
    {
      "code": "Machine 3",
      "date": "2019-01-21 00:00:00",
      "assets": {
        "PRN": 2
      }
    }
  ],
  "PRN1": [
    {
      "code": "Machine 2",
      "date": "2019-01-20 00:00:00",
      "assets": {
        "PRN1": 2
      }
    },
    {
      "code": "Machine 4",
      "date": "2019-01-22 00:00:00",
      "assets": {
        "PRN1": 2
      }
    }
  ],
  "PRN2": [
    {
      "code": "Machine 5",
      "date": "2019-01-23 00:00:00",
      "assets": {
        "PRN2": 2
      }
    }
  ]
}

answered Dec 4, 2019 at 8:30

Tsvetan Ganev

8,9164 gold badges32 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ABC Over a year ago

how to make it an array?

ABC Over a year ago

for example [0:{PRN:{..}},1{PRN1:{..}}, 2{PRN2:{..}}]

Saloo · Accepted Answer · 2019-12-04 08:22:10Z

You can use RxJS with angular and do it in this way:

Reference: https://rxjs-dev.firebaseapp.com/api/operators/groupBy

import { of } from 'rxjs';
import { groupBy, map, mergeMap, reduce } from 'rxjs/operators';

of(
  { id: 1, name: 'JavaScript' },
  { id: 2, name: 'Parcel' },
  { id: 2, name: 'webpack' },
  { id: 1, name: 'TypeScript' },
  { id: 3, name: 'TSLint' }
)
  .pipe(
    groupBy(p => p.id, p => p.name),
    mergeMap(group$ =>
      group$.pipe(reduce((acc, cur) => [...acc, cur], [`${group$.key}`]))
    ),
    map(arr => ({ id: parseInt(arr[0], 10), values: arr.slice(1) }))
 )
 .subscribe(p => console.log(p));

// displays:
// { id: 1, values: [ 'JavaScript', 'TypeScript' ] }
// { id: 2, values: [ 'Parcel', 'webpack' ] }
// { id: 3, values: [ 'TSLint' ] }

Akshay Bande · Accepted Answer · 2019-12-04 08:57:25Z

1

You can achieve is using Array.prototype.reduce function.

let rowData = [
  {code: "Machine 1", date: "2019-01-19 02:00:00", assets: { PRN: 2}},
  {code: "Machine 2", date: "2019-01-20 00:00:00", assets: { PRN1: 2}},
  {code: "Machine 3", date: "2019-01-21 00:00:00", assets: { PRN: 2}},
  {code: "Machine 4", date: "2019-01-22 00:00:00", assets: { PRN1: 2}},
  {code: "Machine 5", date: "2019-01-23 00:00:00", assets: { PRN2: 2}}
]


let ans = rowData.reduce((acc,val)=>{
  let key = Object.keys(val.assets)[0];	
  acc[key] = acc[key] ? acc[key] : [];	
  acc[key].push(val);	
  return acc;

}, {})

console.log(ans);

answered Dec 4, 2019 at 8:57

Akshay Bande

2,6052 gold badges17 silver badges34 bronze badges

Collectives™ on Stack Overflow

How to group an array by one of its object keys in JavaScript

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related