Create an array by grouping objects together using a specific key to form a new array object

Question

Create an array by grouping objects together using a specific key to form a new array object

Here is my array object:

[{ role : 'Role 1', name: 'A', slid: 'a'}, {role : 'Role 1', name: 'B',slid: 'b'}, {role : 'Role 2', name: 'X', slid: 'x'}, {role : 'Role 2',name: 'Y', slid: 'y'},{role : 'Role 3',name: 'Z',slid: 'z'}]

Is there a way to merge the objects in this array based on their roles and create new array objects in the following format?

[{role : 'Role 1', list: [{name: 'A', slid: 'a'}, {name: 'B', slid: 'b'}]},
 {role : 'Role 2', list: [{name: 'X, slid: 'x'}, {name: 'Y', slid: 'y'}]},
 {role : 'Role 3', list: [{name: 'Z', slid: 'z'}]}]

I have searched through various examples, but haven't found a solution yet.

javascript arrays

Answer 1

Answer №1

To organize the array into an object, utilize the reduce method. Then, transform the object back into an array using Object.values.

var data = [{"role":"Role 1","name":"A","slid":"a"},{"role":"Role 1","name":"B","slid":"b"},{"role":"Role 2","name":"X","slid":"x"},{"role":"Role 2","name":"Y","slid":"y"},{"role":"Role 3","name":"Z","slid":"z"}];

var finalResult = Object.values(data.reduce((collection, {role,...rest}) => {
  collection[role] = collection[role] || {role,list: []};
  collection[role].list.push(rest);
  return collection;
}, {}));

console.log(finalResult);

Answer 2

To organize the array into an object, utilize the reduce method. Then, transform the object back into an array using Object.values.

var data = [{"role":"Role 1","name":"A","slid":"a"},{"role":"Role 1","name":"B","slid":"b"},{"role":"Role 2","name":"X","slid":"x"},{"role":"Role 2","name":"Y","slid":"y"},{"role":"Role 3","name":"Z","slid":"z"}];

var finalResult = Object.values(data.reduce((collection, {role,...rest}) => {
  collection[role] = collection[role] || {role,list: []};
  collection[role].list.push(rest);
  return collection;
}, {}));

console.log(finalResult);

Answer 3

Answer №2

const list = [{
  role: 'Role 1',
  name: 'A',
  slid: 'a',
}, {
  role: 'Role 1',
  name: 'B',
  slid: 'b',
}, {
  role: 'Role 2',
  name: 'X',
  slid: 'x',
}, {
  role: 'Role 2',
  name: 'Y',
  slid: 'y',
}, {
  role: 'Role 3',
  name: 'Z',
  slid: 'z',
}];

// Iterating through the array elements
const result = list.reduce((temp, item) => {
  // Checking if the item's role is already in our final array
  const foundItem = temp.find(existingItem => existingItem.role === item.role);

  // Adding a new value to the existing role
  if (foundItem) {
    foundItem.list.push({
      name: item.name,
      slid: item.slid
    });

    return temp;
  }

  // Creating a new array element if role does not exist
  temp.push({
    role: item.role,
    
    list: [{
      name: item.name,
      slid: item.slid
    }],
  });
  
  return temp;
}, []);

console.log(result);

Answer 4

const list = [{
  role: 'Role 1',
  name: 'A',
  slid: 'a',
}, {
  role: 'Role 1',
  name: 'B',
  slid: 'b',
}, {
  role: 'Role 2',
  name: 'X',
  slid: 'x',
}, {
  role: 'Role 2',
  name: 'Y',
  slid: 'y',
}, {
  role: 'Role 3',
  name: 'Z',
  slid: 'z',
}];

// Iterating through the array elements
const result = list.reduce((temp, item) => {
  // Checking if the item's role is already in our final array
  const foundItem = temp.find(existingItem => existingItem.role === item.role);

  // Adding a new value to the existing role
  if (foundItem) {
    foundItem.list.push({
      name: item.name,
      slid: item.slid
    });

    return temp;
  }

  // Creating a new array element if role does not exist
  temp.push({
    role: item.role,
    
    list: [{
      name: item.name,
      slid: item.slid
    }],
  });
  
  return temp;
}, []);

console.log(result);

Answer 5

Answer №3

Introducing a unique method using Array.map

const data = [{ role : 'Role 1', name: 'A', slid: 'a'},{role : 'Role 1', name: 'B',slid: 'b'}, {role : 'Role 2', name: 'X', slid: 'x'}, {role : 'Role 2',name: 'Y', slid: 'y'},{role : 'Role 3',name: 'Z',slid: 'z'}]

const result = data.sort((a,b) => a.role.localeCompare(b.role))
                   .map(({ role, ...rest }) => ({ role, list: [rest] }))
                   .flatMap(({ role, list }, i, t) => 
                         role == (t[i+1] && t[i+1].role)
                           ? (t[i+1].list.unshift(list[0]), [])
                           : { role, list })

console.log(result)

Answer 6

Introducing a unique method using Array.map

const data = [{ role : 'Role 1', name: 'A', slid: 'a'},{role : 'Role 1', name: 'B',slid: 'b'}, {role : 'Role 2', name: 'X', slid: 'x'}, {role : 'Role 2',name: 'Y', slid: 'y'},{role : 'Role 3',name: 'Z',slid: 'z'}]

const result = data.sort((a,b) => a.role.localeCompare(b.role))
                   .map(({ role, ...rest }) => ({ role, list: [rest] }))
                   .flatMap(({ role, list }, i, t) => 
                         role == (t[i+1] && t[i+1].role)
                           ? (t[i+1].list.unshift(list[0]), [])
                           : { role, list })

console.log(result)

Answer 7

Answer №4

To tackle the problem, one could utilize the reduce function

const data = [{ role : 'Role 1', name: 'A', slid: 'a'}, {role : 'Role 1', name: 'B',slid: 'b'}, {role : 'Role 2', name: 'X', slid: 'x'}, {role : 'Role 2',name: 'Y', slid: 'y'},{role : 'Role 3',name: 'Z',slid: 'z'}]

var groupBy = function(array, key) {
  return array.reduce(function(reducedValue, obj) {
    (reducedValue[obj[key]] = reducedValue[obj[key]] || []).push(obj);
    return reducedValue;
  }, {});
};

console.log(groupBy(data, 'role'));

//{Role 1: Array(2), Role 2: Array(2), Role 3: Array(1)}

Answer 8

To tackle the problem, one could utilize the reduce function

const data = [{ role : 'Role 1', name: 'A', slid: 'a'}, {role : 'Role 1', name: 'B',slid: 'b'}, {role : 'Role 2', name: 'X', slid: 'x'}, {role : 'Role 2',name: 'Y', slid: 'y'},{role : 'Role 3',name: 'Z',slid: 'z'}]

var groupBy = function(array, key) {
  return array.reduce(function(reducedValue, obj) {
    (reducedValue[obj[key]] = reducedValue[obj[key]] || []).push(obj);
    return reducedValue;
  }, {});
};

console.log(groupBy(data, 'role'));

//{Role 1: Array(2), Role 2: Array(2), Role 3: Array(1)}

Create an array by grouping objects together using a specific key to form a new array object

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

The state object in Next.js appears to be missing

Steps to determine the number of columns with a zero value in a multidimensional array

Monitor the collection for changes before adding an item to the collection

Steps to generate an error in the 'response' function of a $httpProvider interceptor

error is not defined in the onsuccess function of the ajax.beginform partial view

Developing a custom JavaScript function to iterate through a group of html elements

Tips for simulating an ajax request in a Jasmine test

What could be causing this floating point exception I am experiencing?

Swapping out the video in real-time using an on-demand script

Preserving and Reversing Drag and Drop Canvas Configurations in HTML5 Canvas

Issue with wp_ajax function not being triggered in Wordpress

Attempting to eliminate Roman numerals and numerical values from a list of Strings

Enhance the style of your React components with React-addons-css-transition

Utilizing setColumns() function within Google Charts for JSON data tables

Retrieve the 90 days leading up to the current date using JavaScript

I'm having some trouble with my middleware test in Jest - what could be going wrong?

I'd like to know what sets next/router apart from next/navigation

Using PHP, we can easily create an array and store values that are stored in variables

Ways to execute a JavaScript function upon a button click instead of during the page load completion

React-Native has reached the maximum update depth, please check the new state