Categorize an array by shared values

Question

Categorize an array by shared values

Here is an example of my array structure:

myArray = [
  {SKU: "Hoo12", Name: "ACyrlic watch",OrderNo:"26423764233456"},
  {SKU: "S0002", Name: "Princes Geometry",OrderNo:"124963805662313"},
  {SKU: "Hoo12", Name: "ACyrlic watch",OrderNo:"122324234234"},
]


I am trying to convert the array to the following format:

OutPut = [
  {SKU: "Hoo12",Name: "ACyrlic watch", OrderNo: ["26423764233456", "122324234234"]},
  {SKU: "S0002", Name: "Princes Geometry", OrderNo: ["124963805662313"]}
]

I have experimented with different methods, but I am struggling to group similar values together.

javascript arrays group-by

Answer 1

Answer №1

When you encounter data that requires grouping, Array.reduce is a powerful tool.

For example:

const myArray = [
  {SKU: "Hoo12", Name: "ACyrlic watch",OrderNo:"26423764233456"},
  {SKU: "S0002", Name: "Princes Geometry",OrderNo:"124963805662313"},
  {SKU: "Hoo12", Name: "ACyrlic watch",OrderNo:"122324234234"},
];

const OutPut = myArray.reduce((a,v) => {
  let c = a.find(f => f.SKU === v.SKU);
  //check if SKU already exists
  if (!c) {
    //If not, add it
    c = v;
    c.OrderNo = [v.OrderNo];
    a.push(c);
  } else {
    //If yes, add the OrderNo
    c.OrderNo.push(v.OrderNo);
  }
  return a;
}, []);

console.log(OutPut);

Answer 2

When you encounter data that requires grouping, Array.reduce is a powerful tool.

For example:

const myArray = [
  {SKU: "Hoo12", Name: "ACyrlic watch",OrderNo:"26423764233456"},
  {SKU: "S0002", Name: "Princes Geometry",OrderNo:"124963805662313"},
  {SKU: "Hoo12", Name: "ACyrlic watch",OrderNo:"122324234234"},
];

const OutPut = myArray.reduce((a,v) => {
  let c = a.find(f => f.SKU === v.SKU);
  //check if SKU already exists
  if (!c) {
    //If not, add it
    c = v;
    c.OrderNo = [v.OrderNo];
    a.push(c);
  } else {
    //If yes, add the OrderNo
    c.OrderNo.push(v.OrderNo);
  }
  return a;
}, []);

console.log(OutPut);

Answer 3

Answer №2

With the use of the `reduce` method, you can easily obtain the desired output

const myArray = [ {SKU: "Hoo12", Name: "ACyrlic watch",OrderNo:"26423764233456"}, {SKU: "S0002", Name: "Princes Geometry",OrderNo:"124963805662313"}, {SKU: "Hoo12", Name: "ACyrlic watch",OrderNo:"122324234234"}];

const result = Object.values(myArray.reduce((a,{OrderNo, ...r})=>{
    a[r.SKU] ??= {...r, OrderNo:[]};
    a[r.SKU].OrderNo.push(OrderNo)
    return a;
},{}));

console.log(result);

Answer 4

With the use of the `reduce` method, you can easily obtain the desired output

const myArray = [ {SKU: "Hoo12", Name: "ACyrlic watch",OrderNo:"26423764233456"}, {SKU: "S0002", Name: "Princes Geometry",OrderNo:"124963805662313"}, {SKU: "Hoo12", Name: "ACyrlic watch",OrderNo:"122324234234"}];

const result = Object.values(myArray.reduce((a,{OrderNo, ...r})=>{
    a[r.SKU] ??= {...r, OrderNo:[]};
    a[r.SKU].OrderNo.push(OrderNo)
    return a;
},{}));

console.log(result);

Answer 5

Answer №3

If you prefer not to alter the original myArray in a pure function, a straightforward forEach loop can work.

// Initialization
myArray = [
  {SKU: "Hoo12", Name: "ACyrlic watch",OrderNo:"26423764233456"},
  {SKU: "S0002", Name: "Princes Geometry",OrderNo:"122324234234"},
  {SKU: "Hoo12", Name: "ACyrlic watch",OrderNo:"122324234234"},
]

OutPut = []

// Loop through each element of the array
myArray.forEach(elem => {
  // Check if there is a matching SKU and Name in the output array
  let found = OutPut.find(o => o.SKU == elem.SKU && o.Name == elem.Name)
  // If found, add the OrderNo to the existing array
  if (found) {
    found.OrderNo.push(elem.OrderNo)
  }
  // If not found, create a new object with OrderNo as an array
  else {
    OutPut.push({ SKU: elem.SKU, Name: elem.Name, OrderNo: [ elem.OrderNo ] })
  }
})

// Display the output
let c = document.createElement('pre');
c.innerText = JSON.stringify(OutPut, null, 2)
document.body.appendChild(c)

Answer 6

If you prefer not to alter the original myArray in a pure function, a straightforward forEach loop can work.

// Initialization
myArray = [
  {SKU: "Hoo12", Name: "ACyrlic watch",OrderNo:"26423764233456"},
  {SKU: "S0002", Name: "Princes Geometry",OrderNo:"122324234234"},
  {SKU: "Hoo12", Name: "ACyrlic watch",OrderNo:"122324234234"},
]

OutPut = []

// Loop through each element of the array
myArray.forEach(elem => {
  // Check if there is a matching SKU and Name in the output array
  let found = OutPut.find(o => o.SKU == elem.SKU && o.Name == elem.Name)
  // If found, add the OrderNo to the existing array
  if (found) {
    found.OrderNo.push(elem.OrderNo)
  }
  // If not found, create a new object with OrderNo as an array
  else {
    OutPut.push({ SKU: elem.SKU, Name: elem.Name, OrderNo: [ elem.OrderNo ] })
  }
})

// Display the output
let c = document.createElement('pre');
c.innerText = JSON.stringify(OutPut, null, 2)
document.body.appendChild(c)

Categorize an array by shared values

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to show distinct items and their frequencies from an array of objects in Vue.js/JavaScript?

Node.js course utilizing MySQL library implementing Object-Oriented Programming concepts

The switch statement remains unchanged for varying variables

I am experiencing issues with the jQuery function within my MVC Application

JavaScript Drag-and-Drop Statement Issues

Form elements change when focused on text boxes

Integrate several YouTube players within a tabbed angular-ui system. Looking to incorporate a collapse feature

Error message: NGINX combined with Express.js and socket.io, page not found

The share-modal.js file is throwing an error because it is unable to read properties of null, particularly the 'addEventListener' property, at

Concealing the sidebar in React with the help of Ant Design

In JavaScript, efficiently remove specific node types from a tree structure using recursion, while also maintaining and distributing qualified child nodes

Transform JSON into a JavaScript array object using node.js

Sync user information when alterations are made on a different device

What happens in the React tutorial when the clear fix is commented out and the appearance does not change?

Establishing Accessor and Mutator Methods

How to Retrieve Superclass Fields in Angular 5 Component

Implementing route prefix in a combination of express and react deployment

Exploring the concept of template inheritance in Vue.js

AJAX request is successful, however, the database remains empty with no data being inserted

Tips for organizing date columns in Bootstrap-Vue when utilizing a formatter for presentation purposes