Combining an array into another array using the same key in JavaScript

Question

Combining an array into another array using the same key in JavaScript

My goal is to merge the array itself and transform it into a more meaningful array

array = [
{item: 'pen', madeIn: 'US', color: 'blue'},
{item: 'pen', madeIn: 'US', color: 'white'},
{item: 'pen', madeIn: 'China', color: 'red'},
{item: 'pen', madeIn: 'China', color: 'white'}
]

The desired output array I am trying to create :

outputArray = [
{item: 'pen', madeIn: 'US', color: ['blue', 'white']},
{item: 'pen', madeIn: 'China', color: ['red', 'white']}
];

I have attempted different methods without success. One solution involves using a temporary variable to store item and madeIn values, followed by another loop to compare items and madeIn values and then add colors to an array. Multiple loops are needed to solve this issue.

While this method works, it is not the most efficient solution. Any other ideas or suggestions would be greatly appreciated. Thank you.

javascript arrays algorithm typescript object

Answer 1

Answer №1

Utilize the reduce method on the array to transform it into an object by creating a key based on the item and madeIn properties. For each object, check if the key already exists; if not, create a new object for the key with an empty array as the color property. Add the color of each object to this array. Finally, convert the object to an array using Object.values().

const array = [{"item":"pen","madeIn":"US","color":"blue"},{"item":"pen","madeIn":"US","color":"white"},{"item":"pen","madeIn":"China","color":"red"},{"item":"pen","madeIn":"China","color":"white"}]

const result = Object.values(
  array.reduce((r, o) => {
    const key = `${o.item}-${o.madeIn}`
    
    if(!r[key]) r[key] = { ...o, color: [] }
    
    r[key].color.push(o.color)
    
    return r;
  }, {})
)

console.log(result)

Answer 2

Utilize the reduce method on the array to transform it into an object by creating a key based on the item and madeIn properties. For each object, check if the key already exists; if not, create a new object for the key with an empty array as the color property. Add the color of each object to this array. Finally, convert the object to an array using Object.values().

const array = [{"item":"pen","madeIn":"US","color":"blue"},{"item":"pen","madeIn":"US","color":"white"},{"item":"pen","madeIn":"China","color":"red"},{"item":"pen","madeIn":"China","color":"white"}]

const result = Object.values(
  array.reduce((r, o) => {
    const key = `${o.item}-${o.madeIn}`
    
    if(!r[key]) r[key] = { ...o, color: [] }
    
    r[key].color.push(o.color)
    
    return r;
  }, {})
)

console.log(result)

Answer 3

Answer №2

Utilize the reduce function:

const items = [{ name: 'shirt', brand: 'Nike', color: 'black' }, { name: 'shirt', brand: 'Adidas', color: 'white' }, { name: 'shoes', brand: 'Reebok', color: 'red' }, { name: 'pants', brand: 'Puma', color: 'blue' }];

const result = Object.values(items.reduce((acc, { name, brand, color}) => {
  acc[`${name}-${brand}`] = acc[`${name}-${brand}`] || { name, brand, color: [] };
  acc[`${name}-${brand}`].color.push(color);
  return acc;
}));

console.log(result);

Answer 4

Utilize the reduce function:

const items = [{ name: 'shirt', brand: 'Nike', color: 'black' }, { name: 'shirt', brand: 'Adidas', color: 'white' }, { name: 'shoes', brand: 'Reebok', color: 'red' }, { name: 'pants', brand: 'Puma', color: 'blue' }];

const result = Object.values(items.reduce((acc, { name, brand, color}) => {
  acc[`${name}-${brand}`] = acc[`${name}-${brand}`] || { name, brand, color: [] };
  acc[`${name}-${brand}`].color.push(color);
  return acc;
}));

console.log(result);

Answer 5

Answer №3

Check out this innovative solution that leverages Array.prototype.reduce() along with object destructuring:

const initialItems = [
  {name: 'book', origin: 'US', category: 'fiction'},
  {name: 'book', origin: 'US', category: 'non-fiction'},
  {name: 'book', origin: 'UK', category: 'mystery'},
  {name: 'book', origin: 'UK', category: 'romance'}
];

const finalItems = initialItems.reduce((accumulator, currentValue) => {
  const item = accumulator.find(x => x.name === currentValue.name && x.origin === currentValue.origin);
  if(item) {
    item.category.push(currentValue.category);
  }
  else {
    accumulator.push({...currentValue, category: [currentValue.category]});
  }
  return accumulator; 
}, []);

console.log(finalItems);

This approach stands out for its independence from a conventional key structure and ability to handle diverse datasets.

Answer 6

Check out this innovative solution that leverages Array.prototype.reduce() along with object destructuring:

const initialItems = [
  {name: 'book', origin: 'US', category: 'fiction'},
  {name: 'book', origin: 'US', category: 'non-fiction'},
  {name: 'book', origin: 'UK', category: 'mystery'},
  {name: 'book', origin: 'UK', category: 'romance'}
];

const finalItems = initialItems.reduce((accumulator, currentValue) => {
  const item = accumulator.find(x => x.name === currentValue.name && x.origin === currentValue.origin);
  if(item) {
    item.category.push(currentValue.category);
  }
  else {
    accumulator.push({...currentValue, category: [currentValue.category]});
  }
  return accumulator; 
}, []);

console.log(finalItems);

This approach stands out for its independence from a conventional key structure and ability to handle diverse datasets.

Combining an array into another array using the same key in JavaScript

Answer №1

Answer №2

Answer №3

Similar questions

Display the preloaded element as the first item using Javascript

Utilize your access token to send a message through Google Business Messages

Retrieving an AJAX array POST in Laravel 5 Controller

Looking for a way to customize the background-color and border of the <tr> element in DataTables 1.9.4? Learn how to enhance the styling of your tables with these

Leveraging the power of the 'var' keyword in JavaScript when

What is preventing me from utilizing a dynamic import while working with Nuxt3?

Display overlay objects specifically focused around the mouse cursor, regardless of its position on the screen

What is the best way to show TypeScript code using "<code>" tags within an Angular application?

Is it possible to make a distinctive choice from the dropdown menu?

Bower downloads the identical package but arranges it in a distinct file structure

Invoke the C# function in the code-behind using an AJAX call

Upgrade to a more stable configuration version for Nodemailer as the current configuration is not supported. Consider down

Clearing selections from a multiple-choice input field

Anticipated an expression prior to 'char' syntax

Discovering the presence of line breaks

Is it possible to launch a browser window using javascript?

Exploring MongoDB: Uncovering the array elements within nested objects in a collection's property

Invisibility of form data on new page - PHP and Javascript

jQuery struggles to locate the active class within the Bootstrap slider

Leverage the power of jQuery to fetch data from a PHP script connected to a MySQL database