Combining objects in an array by a specific property

Question

Combining objects in an array by a specific property

In my current project, I am working with an array of objects. Each object in this array contains both an amount and a value property. What I need to achieve is that if two or more objects have the same amount value, I want to combine their values into one object.

For clarity, here is an example array:

const array = [
  {
    "key": 1,
    "amount": 11,
    "value": "were"
  },
  {
    "key": 2,
    "amount": 6,
    "value": "locomotives"
  },
  {
    "key": 3,
    "amount": 5,
    "value": "They"
  },
  {
    "key": 4,
    "amount": 5,
    "value": "with"
  },
  {
    "key": 5,
    "amount": 4,
    "value": "used"
  }
]

The desired transformation would look like this:

const array = [
  {
    "key": 1,
    "amount": 11,
    "value": "were"
  },
  {
    "key": 2,
    "amount": 6,
    "value": "locomotives"
  },
  {
    "key": 3,
    "amount": 5,
    "value": "They, width"
  },
  {
    "key": 5,
    "amount": 4,
    "value": "used"
  }
]

I have attempted using methods like reduce and map, but I have encountered difficulties in properly joining the values together.

javascript arrays ecmascript-6

Answer 1

Answer №1

You may want to consider using the .reduce() method in this scenario:

const array = [
  {
    "key": 1,
    "amount": 11,
    "value": "were"
  },
  {
    "key": 2,
    "amount": 6,
    "value": "locomotives"
  },
  {
    "key": 3,
    "amount": 5,
    "value": "They"
  },
  {
    "key": 4,
    "amount": 5,
    "value": "with"
  },
  {
    "key": 6,
    "amount": 4,
    "value": "used"
  }
];

const result = array.reduce((a, c) => {
  const found = a.find(e => e.amount === c.amount);  
  if (found) found.value = `${found.value}, ${c.value}`;
  return found ? a : a.concat(c);
}, []);

console.log(result);

I trust that this solution will be beneficial to you!

Answer 2

You may want to consider using the .reduce() method in this scenario:

const array = [
  {
    "key": 1,
    "amount": 11,
    "value": "were"
  },
  {
    "key": 2,
    "amount": 6,
    "value": "locomotives"
  },
  {
    "key": 3,
    "amount": 5,
    "value": "They"
  },
  {
    "key": 4,
    "amount": 5,
    "value": "with"
  },
  {
    "key": 6,
    "amount": 4,
    "value": "used"
  }
];

const result = array.reduce((a, c) => {
  const found = a.find(e => e.amount === c.amount);  
  if (found) found.value = `${found.value}, ${c.value}`;
  return found ? a : a.concat(c);
}, []);

console.log(result);

I trust that this solution will be beneficial to you!

Answer 3

Answer №2

To leverage the power of ES6 Maps along with the .reduce() method in JavaScript, you can structure your data to index by the amount value. By checking if an object's amount value is already present within the Map, you can update its corresponding value accordingly. If the amount value is not found in the Map, simply add it as a new key along with the current object as the value. Finally, utilize Array.from() to obtain an array containing the values of objects returned by the iterator generated from .values()

const array = [ { "key": 1, "amount": 11, "value": "were" }, { "key": 2, "amount": 6, "value": "locomotives" }, { "key": 3, "amount": 5, "value": "They" }, { "key": 4, "amount": 5, "value": "with" }, { "key": 5, "amount": 4, "value": "used" } ];

const res = Array.from(array.reduce((m, o) => {
    const curr = m.get(o.amount);
    return m.set(o.amount, curr && {...curr, value: `${curr.value}, ${o.value}`} || o);
}, new Map).values());
console.log(res);

Answer 4

To leverage the power of ES6 Maps along with the .reduce() method in JavaScript, you can structure your data to index by the amount value. By checking if an object's amount value is already present within the Map, you can update its corresponding value accordingly. If the amount value is not found in the Map, simply add it as a new key along with the current object as the value. Finally, utilize Array.from() to obtain an array containing the values of objects returned by the iterator generated from .values()

const array = [ { "key": 1, "amount": 11, "value": "were" }, { "key": 2, "amount": 6, "value": "locomotives" }, { "key": 3, "amount": 5, "value": "They" }, { "key": 4, "amount": 5, "value": "with" }, { "key": 5, "amount": 4, "value": "used" } ];

const res = Array.from(array.reduce((m, o) => {
    const curr = m.get(o.amount);
    return m.set(o.amount, curr && {...curr, value: `${curr.value}, ${o.value}`} || o);
}, new Map).values());
console.log(res);

Answer 5

Answer №3

Personal collection.

let numbers = 
      [ { id: 1, quantity: 3, item: "apples"       } 
      , { id: 2, quantity:  8, item: "bananas"    } 
      , { id: 3, quantity:  4, item: "oranges"    } 
      , { id: 4, quantity:  6, item: "grapes"     } 
      , { id: 5, quantity:  2, item: "kiwis"         } 
      ] 


const updatedNumbers = numbers.reduce((acc,item)=>
                {
                let foundItem = acc.find(e=>e.quantity===item.quantity)
                if (foundItem) foundItem.item += ', '+item.item
                else acc.push(item)
                return acc
                },[])

console.log( updatedNumbers )

Answer 6

Personal collection.

let numbers = 
      [ { id: 1, quantity: 3, item: "apples"       } 
      , { id: 2, quantity:  8, item: "bananas"    } 
      , { id: 3, quantity:  4, item: "oranges"    } 
      , { id: 4, quantity:  6, item: "grapes"     } 
      , { id: 5, quantity:  2, item: "kiwis"         } 
      ] 


const updatedNumbers = numbers.reduce((acc,item)=>
                {
                let foundItem = acc.find(e=>e.quantity===item.quantity)
                if (foundItem) foundItem.item += ', '+item.item
                else acc.push(item)
                return acc
                },[])

console.log( updatedNumbers )

Answer 7

Answer №4

Whenever the reduce method is executed, it checks if a value has already been added and then adds the new value:

const result = array.reduce((a, c) => {
  a[c.amount] = a[c.amount] || c;
  if ((Object.keys(a).includes(c.amount.toString())) && (a[c.amount].value!= c.value))
      a[c.amount].value += ', ' + c.value;
  return a;
}, {});

Here's an illustration:

const array = [
  {
    "key": 1,
    "amount": 11,
    "value": "were"
  },
  {
    "key": 2,
    "amount": 6,
    "value": "locomotives"
  },
  {
    "key": 3,
    "amount": 5,
    "value": "They"
  },
  {
    "key": 4,
    "amount": 5,
    "value": "with"
  },
  {
    "key": 5,
    "amount": 4,
    "value": "used"
  }
];

const result = array.reduce((a, c) => {
  a[c.amount] = a[c.amount] || c;
  if ((Object.keys(a).includes(c.amount.toString())) && (a[c.amount].value!= c.value))
      a[c.amount].value += ', ' + c.value;
  return a;
}, {});

console.log(result);

Answer 8

Whenever the reduce method is executed, it checks if a value has already been added and then adds the new value:

const result = array.reduce((a, c) => {
  a[c.amount] = a[c.amount] || c;
  if ((Object.keys(a).includes(c.amount.toString())) && (a[c.amount].value!= c.value))
      a[c.amount].value += ', ' + c.value;
  return a;
}, {});

Here's an illustration:

const array = [
  {
    "key": 1,
    "amount": 11,
    "value": "were"
  },
  {
    "key": 2,
    "amount": 6,
    "value": "locomotives"
  },
  {
    "key": 3,
    "amount": 5,
    "value": "They"
  },
  {
    "key": 4,
    "amount": 5,
    "value": "with"
  },
  {
    "key": 5,
    "amount": 4,
    "value": "used"
  }
];

const result = array.reduce((a, c) => {
  a[c.amount] = a[c.amount] || c;
  if ((Object.keys(a).includes(c.amount.toString())) && (a[c.amount].value!= c.value))
      a[c.amount].value += ', ' + c.value;
  return a;
}, {});

console.log(result);

Answer 9

Answer №5

Implement a forEach loop to create an object. If the key named amount already exists, combine the value strings.

const updateData = items => {
  const result = {};
  items.forEach(item => {
    result[item.amount] =
      item.amount in result
        ? {
            ...result[item.amount],
            value: `${result[item.amount].value}, ${item.value}`
          }
        : { ...item };
  });
  return Object.values(result);
};

const dataArr = [
  {
    key: 1,
    amount: 11,
    value: "were"
  },
  {
    key: 2,
    amount: 6,
    value: "locomotives"
  },
  {
    key: 3,
    amount: 5,
    value: "They"
  },
  {
    key: 4,
    amount: 5,
    value: "with"
  },
  {
    key: 5,
    amount: 4,
    value: "used"
  }
];

console.log(updateData(dataArr));

Answer 10

Implement a forEach loop to create an object. If the key named amount already exists, combine the value strings.

const updateData = items => {
  const result = {};
  items.forEach(item => {
    result[item.amount] =
      item.amount in result
        ? {
            ...result[item.amount],
            value: `${result[item.amount].value}, ${item.value}`
          }
        : { ...item };
  });
  return Object.values(result);
};

const dataArr = [
  {
    key: 1,
    amount: 11,
    value: "were"
  },
  {
    key: 2,
    amount: 6,
    value: "locomotives"
  },
  {
    key: 3,
    amount: 5,
    value: "They"
  },
  {
    key: 4,
    amount: 5,
    value: "with"
  },
  {
    key: 5,
    amount: 4,
    value: "used"
  }
];

console.log(updateData(dataArr));

Combining objects in an array by a specific property

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Synchronized loops in jQuery using the .each method

Tips for escaping an infinite loop within the componentDidUpdate function in reactjs

Do the incoming ajax data trigger any "if" conditionals?

Exploring the Depths of a Room in ThreeJS

Extending a Typescript class from another file

How to prevent checkbox autocomplete from selecting the previously checked value using Jquery Ajax

The submit button remains disabled despite completing all required fields

The Precision of the IRR (Internal Rate of Return) Calculation in Javascript

Change the destination of an iFrame upon user click

What is the method of utilizing shared services when the controllers do not rely on any shared services?

How can I merge an array of objects in lodash?

Send location data to the PHP server through AJAX and then fetch it in JavaScript once it has been handled

Most effective method to verify the alignment of indices between two arrays

How to feed images to Angular's UI Bootstrap Carousel

What is the best way to align text extracted from an API using JavaScript?

Is there a way to identify the moment when a dynamically added element has finished loading?

Fill an array with the column indexes that match a specific set of strings

What is the point of utilizing angular.extend in this situation?

Cross-Origin Resource Sharing (CORS): The preflight request response does not satisfy the access control check

Error in JavaScript: addition of all numbers not functioning properly within a loop