Map through array of objects and add counter of elements with the same property value-CodePudding

Given following array:

const arr = [
  {color: 'red'}, 
  {color: 'red'}, 
  {color: 'green'}, 
  {color: 'blue'}, 
  {color: 'blue'}, 
  {color: 'red'}]

how to map through its element to create an array of objects extended with property colorIndex which would work as a counter of how many previous elements have the same color property?

the result would be a following array:

[
  {color: 'red', colorIndex: 0}, 
  {color: 'red', colorIndex: 1}, 
  {color: 'green', colorIndex: 0}, 
  {color: 'blue', colorIndex: 0}, 
  {color: 'blue', colorIndex: 1}, 
  {color: 'red', colorIndex: 2}
]

is there some elegant solution to achieve that?

CodePudding user response：

Well, not sure why are you asking and what have you tried already to solve this. It's hard to get proper answer where there is no context at all. But here is my approach, maybe you'll lern a bit of it:

arr.map((elem, index) => {

  // we only care about values before current index, to see how many elements with given color were **before**
  var colors = arr.map((obj) => obj.color).splice(0, index   1);

  return {
    ...elem, // using spread operator to get all properties of original object
    count: colors.reduce(
      (prev, curr) => (curr == elem.color ? prev   1 : prev),
      -1 // starting from -1 to get 0-based counter
    ),
  };
})

See it on stackblitz here: https://stackblitz.com/edit/js-bnru4m

CodePudding user response：

The first solution that comes to my mind isn't elegant but it will do the trick. Best is to work with and extra object.

const foundItems = {};

arr.map(item => {
   let foundItem = foundItems[item.color] ? foundItems[item.color]  1 : 0;
   foundItems[item.color] = founditem;
   return {
      ...item,
      colorIndex: foundItem,
   }

})