How to Group Array Items by Object Properties in JavaScript?

Group Array Items by Object Properties

In your scenario, you wish to consolidate an array containing objects with common group properties into a new array. Each group should have a unique color array.

To achieve this using JavaScript:

1. Create a Mapping of Group Names to Values:
   Create an empty object, group_to_values. Then, traverse through the input array, myArray, using the reduce method.

• For each object in myArray, check the group property.
• Store the group property as a key in group_to_values.
• Create an array at that key if it doesn't exist.
• Push the color property of the object into the array at the corresponding group key.

var group_to_values = myArray.reduce(function (obj, item) {
    obj[item.group] = obj[item.group] || [];
    obj[item.group].push(item.color);
    return obj;
}, {});

2. Transform into Desired Format:
   Convert the group_to_values object into the desired array format. Use Object.keys() to get the group names and transform them into objects.

var groups = Object.keys(group_to_values).map(function (key) {
    return {group: key, color: group_to_values[key]};
});

The result, groups, will be an array of objects, each representing a group, with a color array containing all unique colors for that group.

The above is the detailed content of How to Group Array Items by Object Properties in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!