Ways to combine the values of duplicate object arrays into one

Question

Ways to combine the values of duplicate object arrays into one

I have a list of items with duplicate IDs and I want to merge them into one array for each unique ID. I have successfully found the unique IDs, but now I need help combining the names associated with those IDs.

const x = [
   {id: 1, name: 'green'},
   {id: 2, name: 'red'},
   {id: 1, name: 'blue'}
]

Desired output:

[
   {id: 1, name: 'green, blue'},
   {id: 2, name: 'red'}
]

javascript arrays object ecmascript-6 filter

Answer 1

Answer №1

Simply use the reduce method along with Object.values to achieve the desired result.

const data = [{
    id: 1,
    color: 'green'
  },
  {
    id: 2,
    color: 'red'
  },
  {
    id: 1,
    color: 'blue'
  }
]

const mergedData = Object.values(data.reduce((acc, item) => {
  if (acc[item.id]) {
    acc[item.id].color += ", " + item.color;
  } else {
    acc[item.id] = { ...item };
  }
  return acc;
}, {}));

console.log(mergedData);

Answer 2

Simply use the reduce method along with Object.values to achieve the desired result.

const data = [{
    id: 1,
    color: 'green'
  },
  {
    id: 2,
    color: 'red'
  },
  {
    id: 1,
    color: 'blue'
  }
]

const mergedData = Object.values(data.reduce((acc, item) => {
  if (acc[item.id]) {
    acc[item.id].color += ", " + item.color;
  } else {
    acc[item.id] = { ...item };
  }
  return acc;
}, {}));

console.log(mergedData);

Answer 3

Answer №2

Loop through the elements in array x using the .reduce method and employ a Map to store each element's id as a key and its name as the value.
If the map already contains an entry with the same id, append the current element's name to it.
If not, create a new record for that id.
By the end, the values of the map will hold all the array elements grouped by their respective id, with the names now encompassing all associated values.

const x = [ { id: 1, name: 'green' }, { id: 2, name: 'red' }, { id: 1, name: 'blue' }
];

const res = [...x.reduce((map, {id, name}) => {
  if(map.has(id)) map.get(id).name += `, ${name}`;
  else map.set(id, { id, name });
  return map;
}, new Map)
.values()
];

console.log(res);

Answer 4

Loop through the elements in array x using the .reduce method and employ a Map to store each element's id as a key and its name as the value.
If the map already contains an entry with the same id, append the current element's name to it.
If not, create a new record for that id.
By the end, the values of the map will hold all the array elements grouped by their respective id, with the names now encompassing all associated values.

const x = [ { id: 1, name: 'green' }, { id: 2, name: 'red' }, { id: 1, name: 'blue' }
];

const res = [...x.reduce((map, {id, name}) => {
  if(map.has(id)) map.get(id).name += `, ${name}`;
  else map.set(id, { id, name });
  return map;
}, new Map)
.values()
];

console.log(res);

Answer 5

Answer №3

Effective method utilizing the Set data structure to extract a roster of distinct identifiers.

Subsequently, employing filter and map operations to retrieve all relevant objects, followed by combining their names using join.

const x = [
   {id: 1, name: 'green'},
   {id: 2, name: 'red'},
   {id: 1, name: 'blue'}
]

const result = [];
const uniqueIds = [...new Set(x.map(item => item.id))];
const merged = uniqueIds.forEach((id) => {
  
  // Identify matching ids
  const match = x.filter((o) => o.id === id);
  
  // Assemble names of matching ids
  const names =  match.map(x => x.name);
  
  // Append new data
  result.push({
    id,
    names: names.join(', ')
  });
});

console.log(result);

Answer 6

Effective method utilizing the Set data structure to extract a roster of distinct identifiers.

Subsequently, employing filter and map operations to retrieve all relevant objects, followed by combining their names using join.

const x = [
   {id: 1, name: 'green'},
   {id: 2, name: 'red'},
   {id: 1, name: 'blue'}
]

const result = [];
const uniqueIds = [...new Set(x.map(item => item.id))];
const merged = uniqueIds.forEach((id) => {
  
  // Identify matching ids
  const match = x.filter((o) => o.id === id);
  
  // Assemble names of matching ids
  const names =  match.map(x => x.name);
  
  // Append new data
  result.push({
    id,
    names: names.join(', ')
  });
});

console.log(result);

Ways to combine the values of duplicate object arrays into one

Answer №1

Answer №2

Answer №3

Similar questions

Is there a way to manipulate CSS to update automatically when new content is loaded via ajax?

Guide on triggering a modal upon receiving a function response in React

How can I change the "Return" button on the iOS keyboard to a "Next" button using jQuery or JavaScript?

What is the correct way to utilize the karma-ng-html2js-preprocessor?

Rapidly typing text into a text box using Selenium and Python

Tips for resolving Vue.js static asset URLs in a production environment

Improving the Speed of ASP.NET TreeView

Encountering the error message "handleChange is not a function" when trying to select a date in Material UI

Endless asynchronous loops with setInterval()

What is the best way to ensure that text moves to the next line if it exceeds the boundaries of the parent div in either CSS or

ReactJS - Error: Attempting to access the property 'raw' of an undefined variable

To make the Bootstrap 4 spinner/loader gracefully disappear when the browser window has finished loading, utilize the fadeOut() or hide() function

Ways to navigate back to the previous page on Vue router while replacing the current state

The Angular bootstrap popover vanishes as soon as the mouse hovers over it

Having trouble utilizing the $ selector within a for loop? Avoid attempting to use $("$i") and try an alternative method instead

Ensure all division elements have the same height by utilizing a directive

Performing various JavaScript functions within a single hyperlink

The Ajax response is revealing JavaScript instead of concealing it

How can you extract path information from an SVG file and utilize it as a marker on Google Maps?

The entire DOM has been seamlessly replaced by React.JS within the Node.js server