Aggregate the properties of objects in an array into a single object using Lodash

Question

Aggregate the properties of objects in an array into a single object using Lodash

I've been struggling to figure this out on my own, so I decided to seek advice from those with more experience. I have an array of objects called items, and I need to sum up specific properties across different objects in the array. The user can select certain properties, and I need to only sum those up based on their selections. My initial thought was to use the _.pick function in lodash for this task. Ideally, I would like to accomplish this in just one loop since the items array could potentially contain up to a thousand items. Here's an example:

var items = [
{'lightBlue':4, 'darkBlue':2, 'red':4, 'orange':6, 'purple':7},
{'lightBlue':6, 'darkBlue':5, 'red':1, 'orange':2, 'purple':3},
{'lightBlue':2, 'darkBlue':4, 'red':3, 'orange':4, 'purple':9}
]

var userSelectedColors = ['lightBlue', 'darkBlue'];

The desired output is the summation of all selected colors (in this case, blue):

var summedUp = [{'lightBlue':12, 'darkBlue':11}];

Finally, adding up these results gives us the total count:

var totalCount = 23;

What is the most efficient way to achieve this using lodash? Keep in mind that the userSelectedColors array could have any combination of colors chosen.

Please provide an example. Any help or suggestions are greatly appreciated!

javascript arrays underscore.js lodash

Answer 1

Answer №1

Try using the _.sumBy method.

var total = _.sumBy(selectedColors, _.partial(_.sumBy, items));

var items = [
  { 'lightBlue': 4, 'darkBlue': 2, 'red': 4, 'orange': 6, 'purple': 7 },
  { 'lightBlue': 6, 'darkBlue': 5, 'red': 1, 'orange': 2, 'purple': 3 },
  { 'lightBlue': 2, 'darkBlue': 4, 'red': 3, 'orange': 4, 'purple': 9 }
], selectedColors = ['lightBlue', 'darkBlue'];

var total = _.sumBy(selectedColors, _.partial(_.sumBy, items));

console.log(total);

<script src="https://cdn.jsdelivr.net/lodash/4.13.1/lodash.min.js"></script>

If we expand on that code:

var total = _.sumBy(selectedColors, function(color) {
    return _.sumBy(items, color);
});

For a more efficient solution without Lodash, you can consider this approach:

var total = items.reduce(function(acc, obj) {
    return acc + selectedColors.reduce(function(sum, color) {
        return sum + obj[color];
    }, 0);
}, 0);

var items = [
  { 'lightBlue': 4, 'darkBlue': 2, 'red': 4, 'orange': 6, 'purple': 7 },
  { 'lightBlue': 6, 'darkBlue': 5, 'red': 1, 'orange': 2, 'purple': 3 },
  { 'lightBlue': 2, 'darkBlue': 4, 'red': 3, 'orange': 4, 'purple': 9 }
], selectedColors = ['lightBlue', 'darkBlue'];

var total = items.reduce(function(acc, obj) {
    return acc + selectedColors.reduce(function(sum, color) {
        return sum + obj[color];
    }, 0);
}, 0);

console.log(total);

<script src="https://cdn.jsdelivr.net/lodash/4.13.1/lodash.min.js"></script>

Answer 2

Try using the _.sumBy method.

var total = _.sumBy(selectedColors, _.partial(_.sumBy, items));

var items = [
  { 'lightBlue': 4, 'darkBlue': 2, 'red': 4, 'orange': 6, 'purple': 7 },
  { 'lightBlue': 6, 'darkBlue': 5, 'red': 1, 'orange': 2, 'purple': 3 },
  { 'lightBlue': 2, 'darkBlue': 4, 'red': 3, 'orange': 4, 'purple': 9 }
], selectedColors = ['lightBlue', 'darkBlue'];

var total = _.sumBy(selectedColors, _.partial(_.sumBy, items));

console.log(total);

<script src="https://cdn.jsdelivr.net/lodash/4.13.1/lodash.min.js"></script>

If we expand on that code:

var total = _.sumBy(selectedColors, function(color) {
    return _.sumBy(items, color);
});

For a more efficient solution without Lodash, you can consider this approach:

var total = items.reduce(function(acc, obj) {
    return acc + selectedColors.reduce(function(sum, color) {
        return sum + obj[color];
    }, 0);
}, 0);

var items = [
  { 'lightBlue': 4, 'darkBlue': 2, 'red': 4, 'orange': 6, 'purple': 7 },
  { 'lightBlue': 6, 'darkBlue': 5, 'red': 1, 'orange': 2, 'purple': 3 },
  { 'lightBlue': 2, 'darkBlue': 4, 'red': 3, 'orange': 4, 'purple': 9 }
], selectedColors = ['lightBlue', 'darkBlue'];

var total = items.reduce(function(acc, obj) {
    return acc + selectedColors.reduce(function(sum, color) {
        return sum + obj[color];
    }, 0);
}, 0);

console.log(total);

<script src="https://cdn.jsdelivr.net/lodash/4.13.1/lodash.min.js"></script>

Answer 3

Answer №2

When it comes to efficiency, this method stands out as it only makes a single iteration through the array. However, its approach may not be as concise as @4castle's. (Notably, for arrays containing just 1000 items, any performance disparity would likely go unnoticed anyway.)

var items = [
    {'lightBlue':4, 'darkBlue':2, 'red':4, 'orange':6, 'purple':7},
    {'lightBlue':6, 'darkBlue':5, 'red':1, 'orange':2, 'purple':3},
    {'lightBlue':2, 'darkBlue':4, 'red':3, 'orange':4, 'purple':9}
]

var userSelectedColors = ['lightBlue', 'darkBlue'];

var sums = {};

_.each(items, function (item) {
    _.each(userSelectedColors, function (color) {
        sums[color] = (sums[color] || 0) + item[color];
    });
});

console.log('Summary: ', sums);

console.log('Grand total: ', _.sum(_.values(sums)));

Output:

Summary:  { lightBlue: 12, darkBlue: 11 }
Grand total:  23

Answer 4

When it comes to efficiency, this method stands out as it only makes a single iteration through the array. However, its approach may not be as concise as @4castle's. (Notably, for arrays containing just 1000 items, any performance disparity would likely go unnoticed anyway.)

var items = [
    {'lightBlue':4, 'darkBlue':2, 'red':4, 'orange':6, 'purple':7},
    {'lightBlue':6, 'darkBlue':5, 'red':1, 'orange':2, 'purple':3},
    {'lightBlue':2, 'darkBlue':4, 'red':3, 'orange':4, 'purple':9}
]

var userSelectedColors = ['lightBlue', 'darkBlue'];

var sums = {};

_.each(items, function (item) {
    _.each(userSelectedColors, function (color) {
        sums[color] = (sums[color] || 0) + item[color];
    });
});

console.log('Summary: ', sums);

console.log('Grand total: ', _.sum(_.values(sums)));

Output:

Summary:  { lightBlue: 12, darkBlue: 11 }
Grand total:  23

Answer 5

Answer №3

Summarizing Selected Colors

const colorSummary = userSelectedColors.map(color => ({ [color]: _.sumBy(items, color)}))

Overall Count

const totalColorCount = _.sum(Object.values(colorSummary))

Answer 6

Summarizing Selected Colors

const colorSummary = userSelectedColors.map(color => ({ [color]: _.sumBy(items, color)}))

Overall Count

const totalColorCount = _.sum(Object.values(colorSummary))

Aggregate the properties of objects in an array into a single object using Lodash

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to animate an element when it comes into the user's view

Ways to utilize jquery to limit the length of an editable div and prevent it from exceeding our specified restriction

Error encountered: Segmentation fault occurred following minor adjustments to my code

When attempting to retrieve the data from a JSON file using an XMLHttpRequest, the result that is returned is [object object]

Instead of using a checkmark, consider using step numbers with Mui Stepper's Completed StepIcon

Why are my basic style properties not appearing correctly when I use json_encode on an array?

What is the process for generating a new array of objects by leveraging the contents of two given arrays?

Creating a responsive image within a panel using Bootstrap

Brother or sister is never empty, as every comment is considered an entity

Location of Custom HTML Widget in Django-Dashing

Getting a result from a Node.js function that includes a database query

Debugging Typescript code with line numbers

Unable to load dynamic data in Angular 2 smart table

I am encountering an issue stating "indexRouter has not been defined"

Traverse through an object in ReactJS

When there is only one value, the BehaviorSubject can be hit multiple times

Angular's Routeprovider: Navigating Your Way through the

Add a JavaScript file into a PHP document

How can one access a specific element by its id that is located within an ng-template in Angular 6?

This piece of code is causing my browser to lag