In Javascript, is there a way to split an array into multiple arrays based on object property? [duplicate]

Question

I have the following array of people:

const people = [
  { name: 'Tom Hiddleston', country: 'UK' },
  { name: 'Joe Biden', country: 'USA' },
  { name: 'James Bond', country: 'UK' },
  { name: 'Barack Obama', country: 'USA' },
  { name: 'Dolph Lundgren', country: 'SWEDEN' },
];

Now I want to break this array into multiple arrays based on the country property.

Basically I want a magic function that does the following:

const peopleGroupedByCountry = magicFunction(people);
console.log(peopleGroupedByCountry);

// Should log the following:
[
  [
    { name: 'Tom Hiddleston', country: 'UK' },
    { name: 'James Bond', country: 'UK' },
  ],
  [
    { name: 'Joe Biden', country: 'USA' },
    { name: 'Barack Obama', country: 'USA' },
  ],
  [
    { name: 'Dolph Lundgren', country: 'SWEDEN' },
  ]
]

@PranayNailwal Well that link leads to answers using underscore and jquery, not what I was after. Terry Lennox answer here is in pure vanilla js, and works perfectly. — Weblurk
– Weblurk, Commented Mar 24, 2021 at 7:59
I would recommend Terry's answer since it's much modern and elegant while the referenced Q&A is about 8 years — Hao Wu
– Hao Wu, Commented Mar 24, 2021 at 8:00

Terry Lennox · Accepted Answer · 2021-03-24 07:53:53Z

10

You can use Array.reduce to do this, we create an object with keys for each country.

We can then use Object.values to get this as an array.

const people = [
    { name: 'Tom Hiddleston', country: 'UK' },
    { name: 'Joe Biden', country: 'USA' },
    { name: 'James Bond', country: 'UK' },
    { name: 'Barack Obama', country: 'USA' },
    { name: 'Dolph Lundgren', country: 'SWEDEN' },
];

const grouped = Object.values(people.reduce((acc, item) => {
    // Append the item to the array for each country
    acc[item.country] = [...(acc[item.country] || []), item];
    return acc;
}, {}))

console.log(grouped)

answered Mar 24, 2021 at 7:53

Terry Lennox

30.9k5 gold badges37 silver badges45 bronze badges

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

3 Comments

Hao Wu Over a year ago

It would be better to add another parameter to assign which key should be the reference to group with

Weblurk Over a year ago

Works perfectly, and in vanilla js as well! Unlike whoever closed my question as already answered, referring to a 8 year old post with accepted answers using jQuery and underscore, which is not relevant to my question. Anyway, thanks!

amota Over a year ago

Also enjoyed this answer vs the referred "already answered" post

Collectives™ on Stack Overflow

In Javascript, is there a way to split an array into multiple arrays based on object property? [duplicate]

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related