Sort and group an array of objects by two keys and create array of grouped items with new keys

Question

I have the following array:

const items = [
  { name: 'john', class: 'one', section: 'a' },
  { name: 'john2', class: 'one', section: 'b' },
  { name: 'john3', class: 'one', section: 'a' },
  { name: 'john4', class: 'two', section: 'a' },
  { name: 'john5', class: 'two', section: 'b' },
  { name: 'john6', class: 'two', section: 'b' },
  { name: 'john7', class: 'three', section: 'a' },
  { name: 'john8', class: 'four', section: 'a' },
  { name: 'john9', class: 'four', section: 'b' }
];

I would like to have it grouped in this way:

[
    {
        'oneA': [
            { name: 'john', class: 'one', section: 'a' },
            { name: 'john3', class: 'one', section: 'a' }
        ]
    },
    {
        'oneB': [
            { name: 'john2', class: 'one', section: 'b' }
        ]
    },
    {
        'twoA': [
            { name: 'john4', class: 'two', section: 'a' }
        ]
    },
    {
        'twoB': [
            { name: 'john5', class: 'two', section: 'b' },
            { name: 'john6', class: 'two', section: 'b' }
        ]
    },
    {
        'threeA': [
            { name: 'john7', class: 'three', section: 'a' }
        ]
    },
    {
        'fourA': [
            { name: 'john8', class: 'four', section: 'a' }
        ]
    },
    {
        'fourB': [
            { name: 'john9', class: 'four', section: 'b' }
        ]
    }
]

I have tried something like this:

items.sort(function (a, b) {
  if (a.class > b.class) return 1;
  if (a.class < b.class) return -1;

  if (a.section > b.section) return 1;
  if (a.section < b.section) return -1;
})

This orders the array as I want but it is not grouping as I described above. Do you know a way to reach that?

Why does your result need to contain an array of objects that each have a single key? Why not just one object with multiple keys? And what's the sorting logic? Are you trying to sort based on the text representation of a number? — Robby Cornelissen
– Robby Cornelissen, Commented Jan 28, 2020 at 9:03
@RobbyCornelissen I need an array of objects because I will loop on it and then I will loop in every array of items. — smartmouse
– smartmouse, Commented Jan 28, 2020 at 9:06
Does this answer your question? Most efficient method to groupby on an array of objects — arizafar
– arizafar, Commented Jan 28, 2020 at 9:18
Are you sure that the below node has 'three' class value also ? ``` { 'fourA': [ { name: 'john7', class: 'three', section: 'a' }, { name: 'john8', class: 'four', section: 'a' } ] }``` — HulkSapien
– HulkSapien, Commented Jan 28, 2020 at 9:20

Nina Scholz · Accepted Answer · 2020-01-28 09:16:19Z

2

You could just group them by taking a Map.

It generates a key of class and uppercase section, tries to get the value from the map or take an empty array for spreding int a new array with the actual object. Then it sets this array as new value in the map.

Array.from gets all key/value pairs from the map and build new objects with a computed property name.

const
    getKey = o => `${o.class}${o.section.toUpperCase()}`,
    items = [{ name: 'john', class: 'one', section: 'a' }, { name: 'john2', class: 'one', section: 'b' }, { name: 'john3', class: 'one', section: 'a' }, { name: 'john4', class: 'two', section: 'a' }, { name: 'john5', class: 'two', section: 'b' }, { name: 'john6', class: 'two', section: 'b' }, { name: 'john7', class: 'three', section: 'a' }, { name: 'john8', class: 'four', section: 'a' }, { name: 'john9', class: 'four', section: 'b' }],
    result = Array.from(
        items.reduce(
            (m, o) => m.set(getKey(o), [...(m.get(getKey(o)) || []), o]),
            new Map
        ),
        ([k, v]) => ({ [k]: v })
    );

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

edited Jan 28, 2020 at 9:16

answered Jan 28, 2020 at 9:08

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

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

12 Comments

SparkFountain Over a year ago

Could you please explain the code a little more in detail just for better understanding what it does?

svltmccc Over a year ago

Omg, I hope you don't code in production like this)

svltmccc Over a year ago

@NinaScholz i think there are few things, for example: you define items and result like global. And why do you define getKey if you can just concatenate strings in loop body. I'm not sure but I think you can use {} instead if new Map because it's more familiar for our community. I think you unusually solved the problem, but not in the best way

svltmccc Over a year ago

UPD: items and result are not global, i'm sorry :)

smartmouse Over a year ago

Yes, it works, but it's not familiar as @SaveliTomac said.

|

Sai Jeevan Balla · Accepted Answer · 2020-01-28 10:43:42Z

1

const items = [
    { name: 'john', class: 'one', section: 'a' },
    { name: 'john2', class: 'one', section: 'b' },
    { name: 'john3', class: 'one', section: 'a' },
    { name: 'john4', class: 'two', section: 'a' },
    { name: 'john5', class: 'two', section: 'b' },
    { name: 'john6', class: 'two', section: 'b' },
    { name: 'john7', class: 'three', section: 'a' },
    { name: 'john8', class: 'four', section: 'a' },
    { name: 'john9', class: 'four', section: 'b' }
];

let newArray = items.reduce((main, curr) => {
    let index = main.findIndex(obj => Object.keys(obj).includes(curr.class + curr.section))
    if (index == -1) main.push({ [curr.class + curr.section]: [curr] })
    else main[index][curr.class + curr.section].push(curr)
    return main
}, [])
console.log(newArray)

answered Jan 28, 2020 at 10:43

Sai Jeevan Balla

1453 silver badges10 bronze badges

1 Comment

Sai Jeevan Balla Over a year ago

paiza.io/projects/e/aWzlt-2HKV60MgK9zsqPMA - it works

svltmccc · Accepted Answer · 2020-01-28 11:00:37Z

0

You can use reduce function like:

const items = [
  { name: 'john', class: 'one', section: 'a' },
  { name: 'john2', class: 'one', section: 'b' },
  { name: 'john3', class: 'one', section: 'a' },
  { name: 'john4', class: 'two', section: 'a' },
  { name: 'john5', class: 'two', section: 'b' },
  { name: 'john6', class: 'two', section: 'b' },
  { name: 'john7', class: 'three', section: 'a' },
  { name: 'john8', class: 'four', section: 'a' },
  { name: 'john9', class: 'four', section: 'b' }
];

const groupedItems = items.reduce((result, current) => {
  const key = current.class + current.section.toUpperCase();
  
  if (Array.isArray(result[key])) {
    result[key].push(current);
  } else {
    result[key] = [current];
  }
  
  return result;
}, {});

const expectedResult = Array.from(Object.keys(groupedItems), (elem) => ({[elem]: groupedItems[elem]}));

console.log(expectedResult);

edited Jan 28, 2020 at 11:00

answered Jan 28, 2020 at 9:15

svltmccc

1,38612 silver badges25 bronze badges

7 Comments

smartmouse Over a year ago

It works, but I'm not getting the same order then yours.

svltmccc Over a year ago

You can sort result of reduce, it's simple, i will update my answer

smartmouse Over a year ago

Ok, I did it. Anyway your solution generate an object instead of an array of objects as I described in my question.

svltmccc Over a year ago

@smartmouse your expected result is an array from an once element, you can get it like this: [groupedItems]

svltmccc Over a year ago

@smartmouse are you sure my stdoutput is not what you expect? Check it please again

|

SparkFountain · Accepted Answer · 2020-01-28 09:11:23Z

0

I would suggest to omit the outer array of your result, because for me it does not make sense to have it if you want to create a set of objects.

To solve your problem, just iterate over all items and check if your result object already has the required key. If not, create it, and then insert the current item into the corresponding array.

const items = [
  { name: 'john', class: 'one', section: 'a' },
  { name: 'john2', class: 'one', section: 'b' },
  { name: 'john3', class: 'one', section: 'a' },
  { name: 'john4', class: 'two', section: 'a' },
  { name: 'john5', class: 'two', section: 'b' },
  { name: 'john6', class: 'two', section: 'b' },
  { name: 'john7', class: 'three', section: 'a' },
  { name: 'john8', class: 'four', section: 'a' },
  { name: 'john9', class: 'four', section: 'b' }
];

let result = {};

items.forEach(item => {
  let key = `${item.class}${item.section.toUpperCase()}`;
  if(!result.hasOwnProperty(key)) {
    result[key] = [];
  }
  result[key].push(item);
});

console.info(result);

answered Jan 28, 2020 at 9:11

SparkFountain

2,2701 gold badge18 silver badges37 bronze badges

1 Comment

SparkFountain Over a year ago

Why is this answer downvoted? In my opinion it provides the best explanation to a solution, compared to the other answers that just pasted a bunch of code.

HulkSapien · Accepted Answer · 2020-01-28 10:00:10Z

0

If you are expecting answer in plain javascript for better understanding without using in built functions.

var items = [
    { name: 'john', class: 'one', section: 'a' },
    { name: 'john2', class: 'one', section: 'b' },
    { name: 'john3', class: 'one', section: 'a' },
    { name: 'john4', class: 'two', section: 'a' },
    { name: 'john5', class: 'two', section: 'b' },
    { name: 'john6', class: 'two', section: 'b' },
    { name: 'john7', class: 'three', section: 'a' },
    { name: 'john8', class: 'four', section: 'a' },
    { name: 'john9', class: 'four', section: 'b' }
];
var resultArray =[];
for(var i=0;i<items.length;i++){
    if(resultArray[items[i]['class']+items[i]['section'].toUpperCase()]){
        resultArray[items[i]['class']+items[i]['section'].toUpperCase()].push(items[i]);
    } else {
        var a ="";
        a = items[i]['class']+items[i]['section'].toUpperCase();
        resultArray[a]=[];
        resultArray[a].push(items[i])
    }
}

console.log(resultArray);

edited Jan 28, 2020 at 10:00

answered Jan 28, 2020 at 9:21

HulkSapien

1672 silver badges9 bronze badges

2 Comments

smartmouse Over a year ago

It works, but the order of items is not as I described in my question.

HulkSapien Over a year ago

Order is working fine, can you verify it again . I have now included the uppercase part of section which was missed earlier.. Thanks

Collectives™ on Stack Overflow

Sort and group an array of objects by two keys and create array of grouped items with new keys

5 Answers 5

12 Comments

1 Comment

7 Comments

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

12 Comments

1 Comment

7 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related