Concise way to Group by and Count item in array

Question

I have an array like this:

const arr = [ {name: 'Server 1', country: 'DE'}, {name: 'Server 2', country: 'PL'}, 
              {name: 'Server 3', country: 'US'}, {name: 'Server 4', country: 'DE'}, 
              {name: 'Server 5', country: 'US'}];

What I want is group and count to get the ouput like below:

 [
  {
    "country": "DE",
    "count": 2
  },
  {
    "country": "PL",
    "count": 1
  },
  {
    "country": "US",
    "count": 2
  }
]

Currently, I'm using lodash but I think there are better ways (for example, using _groupBy or something like that) to resolve it, right?

My code is here:

const arr = [ {name: 'Server 1', country: 'DE'}, {name: 'Server 2', country: 'PL'}, {name: 'Server 3', country: 'US'}, {name: 'Server 4', country: 'DE'}, {name: 'Server 5', country: 'US'}];

const objectGroupby = _.countBy(arr, 'country');
const result = Object.entries(objectGroupby).map(([key, value]) => ({country: key, count: value}));
console.log(result);

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>

As you can see, _.countBy(arr, 'country') just returns an object instead of an array.

{
  "DE": 2,
  "PL": 1,
  "US": 2
}

Then I have to use Object.entries() & map to resolve it.

Md Sabbir Alam · Answer 1 · 2021-03-31T11:20:33.300

In terms of performance i think I can write a more performant code using simple for loops as for loops are faster than .map(), .reduce() etc.

You can do the following by traversing the original array once,

const arr = [ {name: 'Server 1', country: 'DE'}, {name: 'Server 2', country: 'PL'}, {name: 'Server 3', country: 'US'}, {name: 'Server 4', country: 'DE'}, {name: 'Server 5', country: 'US'}];

let mapObj = {};
let res = [];
let resIndex = 0;

for(let i = 0; i < arr.length; i++) {
  if(mapObj[arr[i].country] >= 0) {
    res[mapObj[arr[i].country]].count++;
  } else {
    res.push({country: arr[i].country, count: 1});
    mapObj[arr[i].country] = resIndex;
    resIndex++;
  }
}

console.log(res);

In terms of elegant or more readable code, I think using a reduce is more readable. But readability is subjective, it varies from person to person. For me reduce would be more readable.

const arr = [ {name: 'Server 1', country: 'DE'}, {name: 'Server 2', country: 'PL'}, {name: 'Server 3', country: 'US'}, {name: 'Server 4', country: 'DE'}, {name: 'Server 5', country: 'US'}];

res = arr.reduce((prev, curr) => {
  const index = prev.findIndex(item => item.country === curr.country);
  if(index > -1) {
    prev[index].count++;
  } else {
    prev.push({ country: curr.country, count: 1});
  }
  return prev;
}, []);

console.log(res);

Update: Using Lodash,

const arr = [ {name: 'Server 1', country: 'DE'}, {name: 'Server 2', country: 'PL'}, {name: 'Server 3', country: 'US'}, {name: 'Server 4', country: 'DE'}, {name: 'Server 5', country: 'US'}];

result = _.reduce(_.countBy(arr, 'country'), (result, value, key) => {
  result.push({ country: key, count: value});
  return result;
}, []);

console.log(result);

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>

Thanks for your answer. But I think about another `lodash's method` apart from `_.countBy`. anyway +1 respect. — Nguyễn Văn Phong, Mar 31 '21 at 10:35
Hi, I have updated my answer. I think _.reduce() from 'lodash' can be used to write a more compact and readable code. Please take a look. — Md Sabbir Alam, Mar 31 '21 at 11:21
Yes, It looks good. Personally, using `Array#reduce` is the most concise in this case. Thank you. — Nguyễn Văn Phong, Mar 31 '21 at 11:28
In terms of performance, what do you think about between `Object.entries() + map` and `_.reduce` from `_.countBy(arr, 'country')` ? I mean what does actually `Object.entries` do? — Nguyễn Văn Phong, Mar 31 '21 at 11:35
From my observation, `Object.entries()` requires one iteration, and then you are using `map` for another iteration. But for` _.reduce()` you are using only one iteration. It depends on the JS engine implementation. But roughly it will traverse through your object and return an array. You can see here https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries#polyfill. — Md Sabbir Alam, Mar 31 '21 at 11:40
Yeah, I do think so. In short, `Array#reduce` is the best in this case. It just takes `O(n)`. Thanks for your answer +1 — Nguyễn Văn Phong, Mar 31 '21 at 11:42

score 0 · Accepted Answer · answered Apr 05 '21 at 06:09

Hooray !!!

After researching in recent days, I finally figure out the solution using groupBy like this.

const arr = [ {name: 'Server 1', country: 'DE'}, {name: 'Server 2', country: 'PL'}, {name: 'Server 3', country: 'US'}, {name: 'Server 4', country: 'DE'}, {name: 'Server 5', country: 'US'}];
const result = _(arr).groupBy(x => x.country)
                     .map((value, key) => ({country: key, count: value.length})); 
console.log(result);

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>

Explain:

Step 1: Group the elements of array-based on country property
Step 2: Using .map with 2 params value: key is the group's name (country), value is the array of objects.

Reference resource:

using lodash .groupBy. how to add your own keys for grouped output?

Concise way to Group by and Count item in array

2 Answers2