Simple method for grouping and tallying elements within an array

Question

Simple method for grouping and tallying elements within an array

Consider this array:

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'}];

I need to group and count the items to produce the following output:

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

Currently, I am using lodash, but I believe there may be better approaches (such as utilizing _groupBy or something similar) to achieve this outcome. Am I correct?

This is my current code snippet:

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>

In the provided code, _.countBy(arr, 'country') returns an object rather than an array.

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

To address this, I have to employ Object.entries() & map.

javascript group-by count lodash

Answer 1

Answer №1

When it comes to optimizing performance, I believe writing code with simple for loops can be more efficient than using methods like .map() or .reduce().

You can achieve the same result by iterating through the original array just 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 elegance and readability, some may find using a reduce function clearer. However, readability is subjective and varies from person to person. Personally, I find reduce to 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: Utilizing Lodash library,

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>

Answer 2

When it comes to optimizing performance, I believe writing code with simple for loops can be more efficient than using methods like .map() or .reduce().

You can achieve the same result by iterating through the original array just 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 elegance and readability, some may find using a reduce function clearer. However, readability is subjective and varies from person to person. Personally, I find reduce to 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: Utilizing Lodash library,

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>

Answer 3

Answer №2

Woohoo!

After conducting research over the past few days, I have finally discovered a solution using the groupBy method as shown below.

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>

Explanation:

Step 1: Group the elements of the array based on the country property.
Step 2: Utilize .map with two parameters - key representing the group's name (country) and value representing the array of objects.

For additional information, check out this resource:

Using lodash .groupBy: How to add your own keys for grouped output?

Answer 4

Woohoo!

After conducting research over the past few days, I have finally discovered a solution using the groupBy method as shown below.

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>

Explanation:

Step 1: Group the elements of the array based on the country property.
Step 2: Utilize .map with two parameters - key representing the group's name (country) and value representing the array of objects.

For additional information, check out this resource:

Using lodash .groupBy: How to add your own keys for grouped output?

Simple method for grouping and tallying elements within an array

Answer №1

Answer №2

Similar questions

Developer tools indicate React state property is set despite it always being undefined

Creating a dynamic table in AngularJS with rotating values for rows and columns

SystemJS could not locate the root directory for RxJS

Angular with Leaflet and Leaflet AwesomeMarkers error: "Attempting to access 'icon' property of undefined"

Can an icon be included in Material UI's DataGrid headers when the sorting direction is not defined?

Express route not capturing entire request parameter due to regex issue

JavaScript - Verify if all properties belonging to an object are set to true

Invoking a directive function with a return value from a controller

Tips for utilizing window.scrollTo in tandem with react/material UI?

Execute operations on element itself rather than the output of document.getElementbyId

Receiving "Illegal Invocation" error when attempting to submit form using ajax

When triggered by a click, the function gradually fades in and out. It superimposes one image on top of another, but unfortunately, the sizes

Troubleshooting GLSL scripts within a web-based WebGL environment

Broadcast and listen to events in AngularJS using `$rootScope.$emit`

Transform an array of strings into a JSON object or array

What could be causing the first bar in Chart.js to appear smaller or not show up at all?

Revamping the jQuery eye pupil tracker via the mousemove functionality

Tips for inserting information into data tables

Utilize images inputted via an HTML DOM file uploader within p5.js

Leverage the power of AngularJS to seamlessly incorporate and utilize dynamically generated HTML within the