Find the sum and subtotals for two different categories in a JavaScript array

Question

Find the sum and subtotals for two different categories in a JavaScript array

Currently, I'm in the process of aggregating three totals: totalPoints, monthlyTotals, and monthlyByType by utilizing Array.prototype.reduce.

So far, I've managed to successfully calculate totalPoints and monthlyTotals, but I'm encountering difficulties with the last one, monthlyByType.

Below is the array that requires iteration:

const gamePointsArray = [
  {
    gamePlayId: 'ggg1',
    gameType: 1,
    gameMonth: 4,
    gamePoints: 4000,
  },
  {
    gamePlayId: 'ggg2',
    gameType: 2,
    gameMonth: 2,
    gamePoints: 7000,
  },
  {
    gamePlayId: 'ggg3',
    gameType: 2,
    gameMonth: 0,
    gamePoints: 3000,
  },
  {
    gamePlayId: 'ggg4',
    gameType: 1,
    gameMonth: 8,
    gamePoints: 25000,
  },
  {
    gamePlayId: 'ggg5',
    gameType: 3,
    gameMonth: 8,
    gamePoints: 5000,
  },
  {
    gamePlayId: 'ggg6',
    gameType: 3,
    gameMonth: 3,
    gamePoints: 10000,
  },
  {
    gamePlayId: 'ggg7',
    gameType: 2,
    gameMonth: 3,
    gamePoints: 5000,
  },

]

Here's the reducer code snippet:

const gamePointsReducer = (acc, game) => {

  const { gamePlayId, gameType, gameMonth, gamePoints,} = game

  if (!acc['totalPoints']) {
    acc['totalPoints'] = gamePoints
  } else {
    acc['totalPoints'] += gamePoints
  }

  if (!acc['monthlyTotals']) {
    acc['monthlyTotals'] = {
      0: 0,
      1: 0,
      2: 0,
      3: 0,
      4: 0,
      5: 0,
      6: 0,
      7: 0,
      8: 0,
      9: 0,
      10: 0,
      11: 0,
    }
  }

  acc.monthlyTotals[`${gameMonth}`] += gamePoints 

  if (!acc['monthByType']) {
    acc['monthByType'] = {
      0: {},
      1: {},
      2: {},
      3: {},
      4: {},
      5: {},
      6: {},
      7: {},
      8: {},
      9: {},
      10: {},
      11: {},
    }
  }

  acc.monthByType[`${gameMonth}`] += {
    [`${gameType}`]: gamePoints
  }

  return acc

}

const monthTotalsObj = gamePointsArray.reduce(gamePointsReducer, {}) 
console.log('Game Points totals obj', monthTotalsObj);

In the end, I would like the resulting Object to resemble the following structure:

{
  totalPoints: 59000,
  monthlyTotals: {
    0: 3000,
    1: 0,
    2: 7000,
    3: 15000,
    4: 4000,
    5: 0,
    6: 0,
    7: 0,
    8: 30000,
    9: 0,
    10: 0,
    11: 0,
  },
  monthByType: {
    0: {
      2: 3000,
    },
    1: {},
    2: {
      2: 7000,
    },
    3: {},
    4: {
      1: 4000,
    },
    5: {},
    6: {},
    7: {},
    8: {
      1: 25000,
      3: 5000,
    },
    9: {},
    10: {},
    11: {},
  }
}

javascript arrays ecmascript-6 javascript-objects

Answer 1

Answer №1

To streamline your code, consider setting a default initialValue object, which can eliminate the need for numerous if checks within the reduce callback.

The actual reduce callback remains quite similar to your current approach. Simply update each monthByType accordingly.

const gamePointsArray=[{gamePlayId:"ggg1",gameType:1,gameMonth:4,gamePoints:4000,},{gamePlayId:"ggg2",gameType:2,gameMonth:2,gamePoints:7000,},{gamePlayId:"ggg3",gameType:2,gameMonth:0,gamePoints:3000,},{gamePlayId:"ggg4",gameType:1,gameMonth:8,gamePoints:25000,},{gamePlayId:"ggg5",gameType:3,gameMonth:8,gamePoints:5000,},{gamePlayId:"ggg6",gameType:3,gameMonth:3,gamePoints:10000,},{gamePlayId:"ggg7",gameType:2,gameMonth:3,gamePoints:5000,}];

const initialValue = { 
  totalPoints: 0,
  monthlyTotals: { ...Array(12).fill(0) },
  monthByType: { ... Array.from({ length: 12 }, _ => ({}) }
}

const output = gamePointsArray.reduce((acc, o) => {
  acc.totalPoints += o.gamePoints;
  acc.monthlyTotals[o.gameMonth] += o.gamePoints;
  acc.monthByType[o.gameMonth][o.gameType] = 
      (acc.monthByType[o.gameMonth][o.gameType] || 0) + o.gamePoints;
  return acc;
}, initialValue)

console.log(output)

For a more detailed understanding of the initialValue object:

The monthlyTotals property is created using { ...Array(12).fill(0) } or

Object.assign({}, Array(12).fill(0) )

. This generates an object where the indices of the array become the keys with their corresponding values.

The monthByType property requires the use of object literals. The Array.from() method is well-suited for this purpose. (Avoid using fill as it will reference the same static object in every index, which is not ideal.)

const arrayWithZeros = Array(12).fill(0),
      monthlyTotals = { ...arrayWithZeros };

const arrayWithEmptyLiterals = Array.from({ length: 12 }, _ => ({})),
      monthByType = { ...arrayWithEmptyLiterals }

console.log(JSON.stringify(arrayWithZeros))
console.log(JSON.stringify(monthlyTotals))
console.log(JSON.stringify(arrayWithEmptyLiterals))
console.log(JSON.stringify(monthByType))

Answer 2

To streamline your code, consider setting a default initialValue object, which can eliminate the need for numerous if checks within the reduce callback.

The actual reduce callback remains quite similar to your current approach. Simply update each monthByType accordingly.

const gamePointsArray=[{gamePlayId:"ggg1",gameType:1,gameMonth:4,gamePoints:4000,},{gamePlayId:"ggg2",gameType:2,gameMonth:2,gamePoints:7000,},{gamePlayId:"ggg3",gameType:2,gameMonth:0,gamePoints:3000,},{gamePlayId:"ggg4",gameType:1,gameMonth:8,gamePoints:25000,},{gamePlayId:"ggg5",gameType:3,gameMonth:8,gamePoints:5000,},{gamePlayId:"ggg6",gameType:3,gameMonth:3,gamePoints:10000,},{gamePlayId:"ggg7",gameType:2,gameMonth:3,gamePoints:5000,}];

const initialValue = { 
  totalPoints: 0,
  monthlyTotals: { ...Array(12).fill(0) },
  monthByType: { ... Array.from({ length: 12 }, _ => ({}) }
}

const output = gamePointsArray.reduce((acc, o) => {
  acc.totalPoints += o.gamePoints;
  acc.monthlyTotals[o.gameMonth] += o.gamePoints;
  acc.monthByType[o.gameMonth][o.gameType] = 
      (acc.monthByType[o.gameMonth][o.gameType] || 0) + o.gamePoints;
  return acc;
}, initialValue)

console.log(output)

For a more detailed understanding of the initialValue object:

The monthlyTotals property is created using { ...Array(12).fill(0) } or

Object.assign({}, Array(12).fill(0) )

. This generates an object where the indices of the array become the keys with their corresponding values.

The monthByType property requires the use of object literals. The Array.from() method is well-suited for this purpose. (Avoid using fill as it will reference the same static object in every index, which is not ideal.)

const arrayWithZeros = Array(12).fill(0),
      monthlyTotals = { ...arrayWithZeros };

const arrayWithEmptyLiterals = Array.from({ length: 12 }, _ => ({})),
      monthByType = { ...arrayWithEmptyLiterals }

console.log(JSON.stringify(arrayWithZeros))
console.log(JSON.stringify(monthlyTotals))
console.log(JSON.stringify(arrayWithEmptyLiterals))
console.log(JSON.stringify(monthByType))

Answer 3

Answer №2

One alternative approach is to use a prefilled array instead of an object and then assign or add the values accordingly.

const getYear = fn => Array.from({ length: 12 }, fn);

var data = [{ gamePlayId: 'ggg1', gameType: 1, gameMonth: 4, gamePoints: 4000 }, { gamePlayId: 'ggg2', gameType: 2, gameMonth: 2, gamePoints: 7000 }, { gamePlayId: 'ggg3', gameType: 2, gameMonth: 0, gamePoints: 3000 }, { gamePlayId: 'ggg4', gameType: 1, gameMonth: 8, gamePoints: 25000 }, { gamePlayId: 'ggg5', gameType: 3, gameMonth: 8, gamePoints: 5000 }, { gamePlayId: 'ggg6', gameType: 3, gameMonth: 3, gamePoints: 10000 }, { gamePlayId: 'ggg7', gameType: 2, gameMonth: 3, gamePoints: 5000 }],
    result = data.reduce((r, { gameType, gameMonth, gamePoints }) => {
        r.total += gamePoints;
        r.monthlyTotals[gameMonth] += gamePoints;
        r.monthByType[gameMonth][gameType] = (r.monthByType[gameMonth][gameType] || 0) + gamePoints;
        return r;
    }, { total: 0, monthlyTotals: getYear(() => 0), monthByType: getYear(() => ({ })) });

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 4

One alternative approach is to use a prefilled array instead of an object and then assign or add the values accordingly.

const getYear = fn => Array.from({ length: 12 }, fn);

var data = [{ gamePlayId: 'ggg1', gameType: 1, gameMonth: 4, gamePoints: 4000 }, { gamePlayId: 'ggg2', gameType: 2, gameMonth: 2, gamePoints: 7000 }, { gamePlayId: 'ggg3', gameType: 2, gameMonth: 0, gamePoints: 3000 }, { gamePlayId: 'ggg4', gameType: 1, gameMonth: 8, gamePoints: 25000 }, { gamePlayId: 'ggg5', gameType: 3, gameMonth: 8, gamePoints: 5000 }, { gamePlayId: 'ggg6', gameType: 3, gameMonth: 3, gamePoints: 10000 }, { gamePlayId: 'ggg7', gameType: 2, gameMonth: 3, gamePoints: 5000 }],
    result = data.reduce((r, { gameType, gameMonth, gamePoints }) => {
        r.total += gamePoints;
        r.monthlyTotals[gameMonth] += gamePoints;
        r.monthByType[gameMonth][gameType] = (r.monthByType[gameMonth][gameType] || 0) + gamePoints;
        return r;
    }, { total: 0, monthlyTotals: getYear(() => 0), monthByType: getYear(() => ({ })) });

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Find the sum and subtotals for two different categories in a JavaScript array

Answer №1

Answer №2

Similar questions

I am facing an issue where an AJAX post to Express is not returning any data to req.query. I have tried various solutions but nothing seems to

Having trouble with the menu toggle button on Bootstrap 4?

Using Javascript, print the port number to the console

Converting objects into CSV format and exporting them using JavaScript

What is the best way to display multiple values in a single column in a datatable?

Mastering parameter passing in Node.js functions: A comprehensive guide

Multer failing to generate file during request process

Dynamically linking tabbable tabs is a useful technique that allows for

Create an unordered list using the <ul> tag

Click here for more information in JavaScript Reading Link

What could be causing the poor performance of WebGPU in my benchmark when compared to WebGL?

java code unicode feature in csharp

What is the appropriate way to retrieve an array that has been stored in the this.state property?

One way to organize data from my API is by sorting it based on two date conditions. If one of those conditions is missing, the data should be placed at the beginning of the list

JavaScript array containing objects remains static

AngularJS allows for the passing of a function value into another function

"Enhancing user experience: dynamically adding rows using a combo of jquery, ajax, and php

Unable to resize static and draggable elements simultaneously

Steps for implementing a reset button in a JavaScript slot machine game

Creating a custom class implementation in JavaScript and initializing it with a constructor function