Aggregate the values in an array and organize them into an object based on their frequency

Question

Aggregate the values in an array and organize them into an object based on their frequency

I have an array of information structured like this:

0: { first: "sea",      second: "deniz",   languageId: "English-Turkish"}
1: { first: "play",     second: "oynamak", languageId: "English-Turkish"}
2: { first: "swim",     second: "yuzmek",  languageId: "English-Turkish"}
3: { first: "foo",      second: "bar",     languageId: "German-Russian"}
4: { first: "computer", second: "l'ordi",  languageId: "English-French"}

My goal is to group them by languageId and count the items in each group. To help with this, I have an object defined as follows:

export class stats{
    name: String;
    count: number;
}

The desired output should be:

0: { name: "English-Turkish",  count: 3 }
1: { name: "German-Russian",   count: 1 }
2: { name: "English-French",   count: 1 }

I think using the Array.reduce function would be a good approach for this task, but I'm struggling to implement it. Can you provide guidance on how to achieve this?

javascript arrays typescript sorting group-by

Answer 1

Answer №1

It seems like utilizing the Array.reduce function could be a viable solution, but I'm struggling to implement it successfully. Can anyone provide guidance on how to achieve this?

If you refer to .reduce(), you can streamline your code and retrieve the desired outcome in a more elegant manner as shown below:

const items = [
  { first: "sea",      second: "deniz",   languageId: "English-Turkish"},
  { first: "play",     second: "oynamak", languageId: "English-Turkish"},
  { first: "swim",     second: "yuzmek",  languageId: "English-Turkish"},
  { first: "foo",      second: "bar",     languageId: "German-Russian"},
  { first: "computer", second: "l'ordi",  languageId: "English-French"},
];

const result = items.reduce((acc, {languageId}) => 
{
  acc[languageId] = acc[languageId] || {name: languageId, count: 0};
  // The more elegant way: acc[languageId] ??= {name: languageId, count: 0};
  acc[languageId]['count'] += 1;
  
  return acc;
}, {});

console.log(Object.values(result));

The core functionality of the reduce() method involves executing a reducer function on each element within the array to produce a single output value.

Answer 2

It seems like utilizing the Array.reduce function could be a viable solution, but I'm struggling to implement it successfully. Can anyone provide guidance on how to achieve this?

If you refer to .reduce(), you can streamline your code and retrieve the desired outcome in a more elegant manner as shown below:

const items = [
  { first: "sea",      second: "deniz",   languageId: "English-Turkish"},
  { first: "play",     second: "oynamak", languageId: "English-Turkish"},
  { first: "swim",     second: "yuzmek",  languageId: "English-Turkish"},
  { first: "foo",      second: "bar",     languageId: "German-Russian"},
  { first: "computer", second: "l'ordi",  languageId: "English-French"},
];

const result = items.reduce((acc, {languageId}) => 
{
  acc[languageId] = acc[languageId] || {name: languageId, count: 0};
  // The more elegant way: acc[languageId] ??= {name: languageId, count: 0};
  acc[languageId]['count'] += 1;
  
  return acc;
}, {});

console.log(Object.values(result));

The core functionality of the reduce() method involves executing a reducer function on each element within the array to produce a single output value.

Answer 3

Answer №2

Unfortunately, utilizing array.reduce might not be the most suitable approach in this scenario.

However, could this be the solution you are seeking? If required frequently, you could transform it into a function.

let items = [
  { first: "sea",      second: "deniz",   languageId: "English-Turkish"},
  { first: "play",     second: "oynamak", languageId: "English-Turkish"},
  { first: "swim",     second: "yuzmek",  languageId: "English-Turkish"},
  { first: "foo",      second: "bar",     languageId: "German-Russian"},
  { first: "computer", second: "l'ordi",  languageId: "English-French"},
];
let grouped = {};
for (let item of items) {
  let { languageId } = item;
  if (!(languageId in grouped)) {
    grouped[languageId] = [];
  }
  grouped[languageId].push(item);
}
let counts = Object.entries(grouped).map(([name, arr]) => ({ name, count: arr.length }));
console.log(counts);

This includes both grouped and counts, so if you require them all grouped in one place, this option offers that functionality as well.

Answer 4

Unfortunately, utilizing array.reduce might not be the most suitable approach in this scenario.

However, could this be the solution you are seeking? If required frequently, you could transform it into a function.

let items = [
  { first: "sea",      second: "deniz",   languageId: "English-Turkish"},
  { first: "play",     second: "oynamak", languageId: "English-Turkish"},
  { first: "swim",     second: "yuzmek",  languageId: "English-Turkish"},
  { first: "foo",      second: "bar",     languageId: "German-Russian"},
  { first: "computer", second: "l'ordi",  languageId: "English-French"},
];
let grouped = {};
for (let item of items) {
  let { languageId } = item;
  if (!(languageId in grouped)) {
    grouped[languageId] = [];
  }
  grouped[languageId].push(item);
}
let counts = Object.entries(grouped).map(([name, arr]) => ({ name, count: arr.length }));
console.log(counts);

This includes both grouped and counts, so if you require them all grouped in one place, this option offers that functionality as well.

Aggregate the values in an array and organize them into an object based on their frequency

Answer №1

Answer №2

Similar questions

Navigational highlighting of current page section on a one-page website

What could be causing my CORS fetch request to not send cookies to the server?

When I attempt to conceal the filter within mat-table using *ngIf, I encounter an issue where I am unable to read the property 'value' due to it being

Do the Push Notification APIs in Chrome and Firefox OS follow the same set of guidelines and standards?

Is there a way to create tabs in JavaScript without having to edit the <head> section?

Unnecessary socket.io connection in a React component

Is there a way to ensure that this ajax code functions seamlessly with all types of HTML files?

Creating dependent dropdowns using Laravel Inertia Vue: A step-by-step guide

Displaying a subset of categories based on the user's selection

Using Javascript with the Google Calendar API: How can I swiftly make a new event with the Quick Add feature?

Selecting objects within a small three.js view

Neglecting specific packages in package-lock.json

Angular 4 not throwing errors when using Array.Filter and find

In need of guidance on displaying real-time console output in a window using Handlebars

Choosing options using an enum in Angular 2

Manipulating front matter metadata when reading/writing a markdown file in Node.js

Webpack attempting to load build.js from a nested folder

Session management functions properly in Postman, however, encountering issues when attempting to use it on a web

I'm facing some difficulties in sourcing my header into a component and encountering errors. Can anyone advise me on how to properly outsource my header?

The hyperlink tag within the overlay div is unresponsive