Different ways to categorize and tally a collection of objects

Question

Different ways to categorize and tally a collection of objects

I'm having trouble reshaping my data in order to create a stacked bar graph.

The data from the backend is structured like this:

[
    {date: 'January', category: 'A'},
    {date: 'January', category: 'B'},
    {date: 'February', category: 'A'},
    {date: 'February', category: 'B'},
    {date: 'February', category: 'C'},
    {date: 'February', category: 'B'},
    ...
]

I need to transform it into a format where categories are grouped by month and counted like below:

[
    {name: 'January', countA: 1, countB: 1, countC: 0 },
    {name: 'February', countA: 1, countB: 2, countC: 1 }
    ...
]

Currently, I've only managed to tally the total number of categories per month using the reduce function:

const filterData = data.reduce((groups, curr) => {
    const {January = 0, February = 0, ...} = groups;
    switch(curr.date){
        case 'January': return {...groups, January: January + 1}
        case 'February': return {...groups, February: February + 1}
        ...
    }
}, {})

However, this method won't work for the stacked bar graph visualization I have in mind.

javascript arrays

Answer 1

Answer №1

It's uncertain if there will be only three categories based on your question, so here's a solution that accommodates any number of categories. Although it may seem lengthy, this code provides a thorough approach without being overly verbose. (I opted for using a `for...of` loop instead of `reduce` at the end, but feel free to switch them if desired.)

const items = [
  {month: 'March', category: 'X'},
  {month: 'January', category: 'A'},
  {month: 'January', category: 'B'},
  {month: 'February', category: 'A'},
  {month: 'November', category: 'D'},
  {month: 'February', category: 'M'},
  {month: 'February', category: 'B'},
  {month: 'February', category: 'C'},
  {month: 'February', category: 'B'},
  {month: 'January', category: 'D'}
];

// Create an array with unique elements in `count[letter]` format
// by utilizing a Set to map categories
const catSet = new Set(items.map(item => {
  return `count${item.category}`;
}));

// Initialize a counts object from the set
// where each count property is initially set to zero
const counts = {};
for (const count of catSet) {
  counts[count] = 0;
}

// Loop through the data. If the month key is not present
// in the output object, add it and assign values accordingly
const output = {};
for (const item of items) {
  const { month, category } = item;
  const count = `count${category}`;
  output[month] = output[month] || { label: month, ...counts };
  ++output[month][count];
}

// Retrieve the values from the output object
console.log(Object.values(output));

Answer 2

It's uncertain if there will be only three categories based on your question, so here's a solution that accommodates any number of categories. Although it may seem lengthy, this code provides a thorough approach without being overly verbose. (I opted for using a `for...of` loop instead of `reduce` at the end, but feel free to switch them if desired.)

const items = [
  {month: 'March', category: 'X'},
  {month: 'January', category: 'A'},
  {month: 'January', category: 'B'},
  {month: 'February', category: 'A'},
  {month: 'November', category: 'D'},
  {month: 'February', category: 'M'},
  {month: 'February', category: 'B'},
  {month: 'February', category: 'C'},
  {month: 'February', category: 'B'},
  {month: 'January', category: 'D'}
];

// Create an array with unique elements in `count[letter]` format
// by utilizing a Set to map categories
const catSet = new Set(items.map(item => {
  return `count${item.category}`;
}));

// Initialize a counts object from the set
// where each count property is initially set to zero
const counts = {};
for (const count of catSet) {
  counts[count] = 0;
}

// Loop through the data. If the month key is not present
// in the output object, add it and assign values accordingly
const output = {};
for (const item of items) {
  const { month, category } = item;
  const count = `count${category}`;
  output[month] = output[month] || { label: month, ...counts };
  ++output[month][count];
}

// Retrieve the values from the output object
console.log(Object.values(output));

Answer 3

Answer №2

Utilizing Array#reduce along with an object is a great way to keep track of the counts for each month.

let sampleArray = [
    {month: 'January', category: 'A'},
    {month: 'January', category: 'B'},
    {month: 'February', category: 'A'},
    {month: 'February', category: 'B'},
    {month: 'February', category: 'C'},
    {month: 'February', category: 'B'},
];
let result = Object.values(sampleArray.reduce((accumulator, {month, category})=>{
    ++(accumulator[month] ??= {month, countA: 0, countB: 0, countC: 0})['count' + category];
    return accumulator;
}, {}));
console.log(result);

Answer 4

Utilizing Array#reduce along with an object is a great way to keep track of the counts for each month.

let sampleArray = [
    {month: 'January', category: 'A'},
    {month: 'January', category: 'B'},
    {month: 'February', category: 'A'},
    {month: 'February', category: 'B'},
    {month: 'February', category: 'C'},
    {month: 'February', category: 'B'},
];
let result = Object.values(sampleArray.reduce((accumulator, {month, category})=>{
    ++(accumulator[month] ??= {month, countA: 0, countB: 0, countC: 0})['count' + category];
    return accumulator;
}, {}));
console.log(result);

Answer 5

Answer №3

While other solutions have explored the use of reduce and for...of, I will present an alternative method utilizing forEach.

To learn more about forEach, check out: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

let months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
let cleanData =[];
let dirtyData = [];

// fetch original data
dirtyData = retrieveData();

// iterate through each month
months.forEach(month => {
    let monthEntries = dirtyData.filter( entry => entry.date == month);
    let aCount = 0;
    let bCount = 0;
    let cCount = 0;

    // count entries for each category within the month
    monthEntries.forEach(entry => {
        switch (entry.category.toLowerCase()){
            case "a":
                aCount++;
                break;
            case "b":
                bCount++;
                break;
            case "c":
                cCount++;
                break;
        }
    });

    // add formatted data to cleanData array
    cleanData.push({name: month, countA: aCount, countB: bCount, countC: cCount})
});

// display results
console.log(cleanData);

// function to obtain original data
function retrieveData() { return [
    {date: 'January', category: 'A'},
    {date: 'January', category: 'B'},
    {date: 'February', category: 'A'},
    {date: 'February', category: 'B'},
    {date: 'February', category: 'C'},
    {date: 'March', category: 'B'},
    {date: 'March', category: 'A'},
    {date: 'March', category: 'B'},
    {date: 'March', category: 'C'},
    {date: 'March', category: 'B'},
    {date: 'April', category: 'A'},
    {date: 'April', category: 'B'},
    {date: 'April', category: 'C'},
    {date: 'April', category: 'B'},
    {date: 'May', category: 'A'},
    {date: 'May', category: 'B'},
    {date: 'May', category: 'C'},
    {date: 'May', category: 'B'},
    {date: 'May', category: 'A'},
    {date: 'May', category: 'B'},
    {date: 'May', category: 'C'},
    {date: 'May', category: 'B'},
    {date: 'May', category: 'A'},
    {date: 'May', category: 'B'},
    {date: 'June', category: 'C'},
    {date: 'June', category: 'B'},
    {date: 'June', category: 'A'},
    {date: 'July', category: 'B'},
    {date: 'July', category: 'C'},
    {date: 'July', category: 'B'},
    {date: 'July', category: 'A'},
    {date: 'July', category: 'B'},
    {date: 'August', category: 'C'},
    {date: 'September', category: 'B'},
    {date: 'September', category: 'A'},
    {date: 'September', category: 'B'},
    {date: 'October', category: 'C'},
    {date: 'October', category: 'B'},
    {date: 'October', category: 'A'},
    {date: 'October', category: 'B'},
    {date: 'November', category: 'C'},
    {date: 'November', category: 'A'},
    {date: 'December', category: 'B'},
    {date: 'December', category: 'B'},
];
}

Answer 6

While other solutions have explored the use of reduce and for...of, I will present an alternative method utilizing forEach.

To learn more about forEach, check out: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

let months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
let cleanData =[];
let dirtyData = [];

// fetch original data
dirtyData = retrieveData();

// iterate through each month
months.forEach(month => {
    let monthEntries = dirtyData.filter( entry => entry.date == month);
    let aCount = 0;
    let bCount = 0;
    let cCount = 0;

    // count entries for each category within the month
    monthEntries.forEach(entry => {
        switch (entry.category.toLowerCase()){
            case "a":
                aCount++;
                break;
            case "b":
                bCount++;
                break;
            case "c":
                cCount++;
                break;
        }
    });

    // add formatted data to cleanData array
    cleanData.push({name: month, countA: aCount, countB: bCount, countC: cCount})
});

// display results
console.log(cleanData);

// function to obtain original data
function retrieveData() { return [
    {date: 'January', category: 'A'},
    {date: 'January', category: 'B'},
    {date: 'February', category: 'A'},
    {date: 'February', category: 'B'},
    {date: 'February', category: 'C'},
    {date: 'March', category: 'B'},
    {date: 'March', category: 'A'},
    {date: 'March', category: 'B'},
    {date: 'March', category: 'C'},
    {date: 'March', category: 'B'},
    {date: 'April', category: 'A'},
    {date: 'April', category: 'B'},
    {date: 'April', category: 'C'},
    {date: 'April', category: 'B'},
    {date: 'May', category: 'A'},
    {date: 'May', category: 'B'},
    {date: 'May', category: 'C'},
    {date: 'May', category: 'B'},
    {date: 'May', category: 'A'},
    {date: 'May', category: 'B'},
    {date: 'May', category: 'C'},
    {date: 'May', category: 'B'},
    {date: 'May', category: 'A'},
    {date: 'May', category: 'B'},
    {date: 'June', category: 'C'},
    {date: 'June', category: 'B'},
    {date: 'June', category: 'A'},
    {date: 'July', category: 'B'},
    {date: 'July', category: 'C'},
    {date: 'July', category: 'B'},
    {date: 'July', category: 'A'},
    {date: 'July', category: 'B'},
    {date: 'August', category: 'C'},
    {date: 'September', category: 'B'},
    {date: 'September', category: 'A'},
    {date: 'September', category: 'B'},
    {date: 'October', category: 'C'},
    {date: 'October', category: 'B'},
    {date: 'October', category: 'A'},
    {date: 'October', category: 'B'},
    {date: 'November', category: 'C'},
    {date: 'November', category: 'A'},
    {date: 'December', category: 'B'},
    {date: 'December', category: 'B'},
];
}

Different ways to categorize and tally a collection of objects

Answer №1

Answer №2

Answer №3

Similar questions

ADVENTURE BLOCKED - Intercept error: net::ERR_BLOCKED_BY_CLIENT

Which is more efficient: An array of objects or an array of object properties?

Get the value of a specific option within a React-bootstrap Form component

Arranging buttons in a row with Bootstrap 5

Is it possible to utilize npm packages within a standard web page without any frameworks or libraries?

Fascinating CSS rendering glitch observed on zooming in: all browsers create a noticeable gap between containers except for Firefox

Unusual shadow cast by the box's silhouette

Troubleshooting Issue with jQuery onclick Function not Transmitting Data

Encountering a hydration issue with an SVG element embedded within a Link component in Next

Tips for using the Enter key to shift focus to the next input field

NodeJS Exporting Features

retrieving information from server via ajax to display on chart

Avoiding the opening of a select menu

Inquiring about the integration of CodeIgniter with Javascript and AJAX

Attaching a buoyant div to the precise location of a different element

What's the source of this undefined error and is there a way to eliminate it from the code?

Determine whether a value contains a minimum of two words or more using JavaScript

What are the steps to incorporate PointerLockControl in Three.js?

A guide on detecting overflow in a React functional component

What is the best way to connect a line from the edge of the circle's outermost arc?