Get rid of duplicates in an array of objects

Question

This part is responsible for processing the Data in the val array so i everything is an integer and saves it in the output array. (The val array sometimes contains floats and i cant work with those)

Lets say the next element that gets processed has a x and y pair that is already in the output array with any other color. How do i replace the old object with the new.

    val.forEach(element => {

        output.push({
            x: Math.round(element.x / element.width),
            y: Math.round(element.y / element.height),
            color: mapColorToBlock(element.color)

        })
    });



/* val array...
[
{"x":0,"y":0,"color":"blue","width":256,"height":256},
{"x":0,"y":256,"color":"blue","width":256,"height":256},
{"x":256,"y":256,"color":"blue","width":256,"height":256},
{"x":256,"y":0,"color":"blue","width":256,"height":256},
{"x":0,"y":256,"color":"lime","width":256,"height":256}
]
*/

/*output array after the processing(notice how there are 2 objects with x = 0 and y = 1 (the second and last entry in output))
[
  { x: 0, y: 0, color: 12 },
  { x: 0, y: 1, color: 12 },
  { x: 1, y: 1, color: 12 },
  { x: 1, y: 0, color: 12 },
  { x: 0, y: 1, color: 6 }
]
*/

It is important that the new one replaces the old object.(The new entry doesnt have to be in the same position in the array as the old one) In this scenario the output array would look like this.

[
  { x: 0, y: 0, color: 12 },
  { x: 1, y: 1, color: 12 },
  { x: 1, y: 0, color: 12 },
  { x: 0, y: 1, color: 6 }
]

Note: It is important that the new one replaces the old object

Shuvo · Accepted Answer · 2021-07-31 04:40:10Z

2

val.forEach(element => {
  const x = Math.round(element.x / element.width);
  const y = Math.round(element.y / element.height);
  const isDuplicate = output.some(item => item.x === x && item.y === y);
  
  if (!isDuplicate) {
    output.push({
        x: x,
        y: y,
        color: mapColorToBlock(element.color)

    })
  }

});

answered Jul 31, 2021 at 4:40

Shuvo

1,2939 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Andy · Accepted Answer · 2021-07-31 04:50:25Z

reduce over the array to create a new object with keys based on the x and y coordinates, and then use Object.values to create a new array of objects from that object's values.

const data=[{x:0,y:0,color:"blue",width:256,height:256},{x:0,y:256,color:"blue",width:256,height:256},{x:256,y:256,color:"blue",width:256,height:256},{x:256,y:0,color:"blue",width:256,height:256},{x:0,y:256,color:"lime",width:256,height:256}];

const out = data.reduce((acc, c) => {

  // Extract the values and create a key
  // from the x and y values
  const { x, y, color, width, height } = c;
  const key = `${x}|${y}`;

  // Do your x/y calculations
  const newX = Math.round(x / width);
  const newY = Math.round(y / height);

  // Add the current object to the property
  // defined by the key *replacing the data
  // if it already exists*
  acc[key] = { x: newX, y: newY, color };

  // Return the accumulator for the next iteration
  return acc;
}, {});

// Now extract the values from the new object
console.log(Object.values(out));

A-J-Bauer · Accepted Answer · 2021-07-31 05:48:20Z

1

A modified version of Shuvo's answer.

This one is only sensible if mapColorToBlock can return different results in successive calls for the same value passed, otherwise Shuvo's answer which skips duplicates is better.

"It is important that the new one replaces the old object"...

let val = [
{"x":0,"y":0,"color":"blue","width":256,"height":256},
{"x":0,"y":256,"color":"blue","width":256,"height":256},
{"x":256,"y":256,"color":"blue","width":256,"height":256},
{"x":256,"y":0,"color":"blue","width":256,"height":256},
{"x":0,"y":256,"color":"lime","width":256,"height":256}
];

let output = [];

val.forEach(element => {
  const x = Math.round(element.x / element.width);
  const y = Math.round(element.y / element.height);
  const found = output.find(item => item.x === x && item.y === y);
  
  if (found) {
    found.color = mapColorToBlock(element.color);
  } else {  
    output.push({
        x: x,
        y: y,
        color: mapColorToBlock(element.color)
    })
  }
});

edited Jul 31, 2021 at 5:48

answered Jul 31, 2021 at 5:36

A-J-Bauer

2,9811 gold badge30 silver badges36 bronze badges

1 Comment

Venox Over a year ago

Shuvos answer just checked if the new entry is a duplicate and didnt replace the old one your answer worked for me. Thanks

Pranavan · Accepted Answer · 2021-07-31 04:50:28Z

1

Here you have to replace the previous element with same x and y

val.forEach(element => {
    output = [...output.filter(out => !( out.x === Math.round(element.x / element.width) && out.y === Math.round(element.y / element.height)), {
        x: Math.round(element.x / element.width),
        y: Math.round(element.y / element.height),
        color: mapColorToBlock(element.color)

    }]
});

answered Jul 31, 2021 at 4:50

Pranavan

1,5451 gold badge10 silver badges20 bronze badges

Collectives™ on Stack Overflow

Get rid of duplicates in an array of objects

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related