How to categorize an array of objects based on a specific property while preserving the original object attributes

Question

How to categorize an array of objects based on a specific property while preserving the original object attributes

I have an array of objects with a specific property that I want to group by. My objective is to create a new array where all the objects have the same properties, but with an additional property that combines all the "value" properties into an array.

Here is the input data along with the desired output. How can I achieve this?

INPUT

[  {
        group_by_this_property: 1,
        value: 100,
        class: 'A',
      },
      {
        group_by_this_property: 1,
        value: 101,
        class: 'A',
      },
      {
        group_by_this_property: 1,
        value: 102,
        class: 'A',
      },
      {
        group_by_this_property: 2,
        value: 200,
        class: 'B',
      },
      {
        group_by_this_property: 2,
        value: 201,
        class: 'B',
      }
    ]

OUTPUT

[
  {
    group_by_this_property: 1,
    values: [100, 101, 102],
    class: 'A',
  },
  {
    group_by_this_property: 2,
    values: [200, 201],
    class: 'B',
  },
]

javascript arrays json object

Answer 1

Answer №1

To organize the items into groups, you can utilize a Map structure and retrieve the values at the end like this:

const data = [ { key_property: 1, value: 100, type: 'A' }, { key_property: 1, value: 101, type: 'A' }, { key_property: 1, value: 102, type: 'A' }, { key_property: 2, value: 200, type: 'B' }, { key_property: 2, value: 201, type: 'B' } ];

const result = [...
  data.reduce((map, { key_property, value, ...properties }) => {
    const { groupValues = [] } = map.get(key_property) ?? {};
    groupValues.push(value);
    map.set(key_property, { ...properties, key_property, groupValues});
    return map;
  }, new Map)
  .values()
];

console.log(result);

Answer 2

To organize the items into groups, you can utilize a Map structure and retrieve the values at the end like this:

const data = [ { key_property: 1, value: 100, type: 'A' }, { key_property: 1, value: 101, type: 'A' }, { key_property: 1, value: 102, type: 'A' }, { key_property: 2, value: 200, type: 'B' }, { key_property: 2, value: 201, type: 'B' } ];

const result = [...
  data.reduce((map, { key_property, value, ...properties }) => {
    const { groupValues = [] } = map.get(key_property) ?? {};
    groupValues.push(value);
    map.set(key_property, { ...properties, key_property, groupValues});
    return map;
  }, new Map)
  .values()
];

console.log(result);

Answer 3

Answer №2

Let me provide you with a couple of illustrative scenarios. One employs the reduce function.

inputArr.reduce((acc, curr) => {
    const existingGroup = acc.find(item => item.group_by_this_property === curr.group_by_this_property);
    if (!existingGroup) {
        acc.push({
            ...curr,
            values: [curr.value]
        });
        delete curr.value;
        return acc;
    }

    existingGroup.values.push(curr.value);
    return acc;
}, [])

Additionally, here is another method utilizing a traditional for loop.

const hashMap = {};
const res = [];
for (let index = 0; index < foo.length; index++) {
    const element = inputArr[index];
    if(element.group_by_this_property in hashMap) {
        hashMap[element.group_by_this_property].values.push(element.value);
    } else {
        hashMap[element.group_by_this_property] = {
            ...element,
            values: [element.value]
        };
        delete hashMap[element.group_by_this_property].value;
        res.push(hashMap[element.group_by_this_property]);
    }
}

Why present two methods? Well, in terms of clarity, one could argue that the first approach is more straightforward and user-friendly. However, for larger datasets, it may become somewhat convoluted as it operates at O(n^2), impacting the performance of this algorithm.

The second approach accomplishes the same task in linear time complexity of O(n). If speed is not a critical factor for your needs or the dataset is relatively small, the first example would suffice.

Answer 4

Let me provide you with a couple of illustrative scenarios. One employs the reduce function.

inputArr.reduce((acc, curr) => {
    const existingGroup = acc.find(item => item.group_by_this_property === curr.group_by_this_property);
    if (!existingGroup) {
        acc.push({
            ...curr,
            values: [curr.value]
        });
        delete curr.value;
        return acc;
    }

    existingGroup.values.push(curr.value);
    return acc;
}, [])

Additionally, here is another method utilizing a traditional for loop.

const hashMap = {};
const res = [];
for (let index = 0; index < foo.length; index++) {
    const element = inputArr[index];
    if(element.group_by_this_property in hashMap) {
        hashMap[element.group_by_this_property].values.push(element.value);
    } else {
        hashMap[element.group_by_this_property] = {
            ...element,
            values: [element.value]
        };
        delete hashMap[element.group_by_this_property].value;
        res.push(hashMap[element.group_by_this_property]);
    }
}

Why present two methods? Well, in terms of clarity, one could argue that the first approach is more straightforward and user-friendly. However, for larger datasets, it may become somewhat convoluted as it operates at O(n^2), impacting the performance of this algorithm.

The second approach accomplishes the same task in linear time complexity of O(n). If speed is not a critical factor for your needs or the dataset is relatively small, the first example would suffice.

How to categorize an array of objects based on a specific property while preserving the original object attributes

Answer №1

Answer №2

Similar questions

Transmit Array of Preferred Values to Controller in MVC Framework

How can I ensure that the ons-scroller stays at the bottom when writing a JavaScript code in Onsen UI?

Deploy a Node.js websocket application on Azure Cloud platform

Why does Axios keep timing out despite successful testing in Postman?

use dotenv in your Build Folder

Turn off and then turn on user input without exiting the textarea

Unable to execute commitlint in husky along with a different custom command

Retrieve the modal ID when the anchor tag is clicked in order to open the modal using PHP

I am looking to integrate a custom button that, when clicked, will launch the file explorer for me to choose a file. Once selected, the file name should automatically populate in the input field

transferring information between two html pages using javascript

Creating a JSON file in UTF-8 format using PHP code within a WordPress plugin

Exploring an array to retrieve a specific value

How can I achieve the quickest image loading speed with JavaScript?

Having trouble positioning a div in AngularJS so that it stays pixel-perfect regardless of browser resize or device orientation? Unfortunately, it's

Utilize jQuery to choose a specific tab

The window.Print() function is currently experiencing a glitch in Microsoft Edge (Version 91.0.864.59) when trying to use it for the first time within an Angular 12

Having trouble decoding a JSON string with slashes?

How can I use PHP and JavaScript to iterate through a <select> / <option> list and gather the values?

I am configuring Jest in my Vite and TypeScript-powered React project

What steps can I take to ensure that my server is accessible to all users?