Remove duplicated objects within an array based on a specified property

Question

Remove duplicated objects within an array based on a specified property

Working with an array containing around 1500 objects, I am attempting to create a new array by eliminating elements that share a duplicate unique property. However, my function seems to be halting after processing the initial 100 elements of the array. How can I ensure that it iterates through the entire array?


        const result = Array.from(new Set(DATA.map((a) => a.Numbers))).map(
            (Numbers) => {
                return DATA.find((a) => a.Numbers === Numbers);
            }
        );

javascript arrays methods filter

Answer 1

Answer №1

Transform the data into an object where the Numbers property is used as keys, eliminating any duplicates. Then extract the values from the object to convert them back into an array.

const DATA = [{ Numbers: 1 },{ Numbers: 2 },{ Numbers: 3 },{ Numbers: 4 },{ Numbers: 1 },{ Numbers: 4 }];
const result = Object.values(Object.fromEntries(DATA.map(a => [a.Numbers, a])));
console.log(result)

Answer 2

Transform the data into an object where the Numbers property is used as keys, eliminating any duplicates. Then extract the values from the object to convert them back into an array.

const DATA = [{ Numbers: 1 },{ Numbers: 2 },{ Numbers: 3 },{ Numbers: 4 },{ Numbers: 1 },{ Numbers: 4 }];
const result = Object.values(Object.fromEntries(DATA.map(a => [a.Numbers, a])));
console.log(result)

Answer 3

Answer №2

You seem to be complicating things unnecessarily. You are using the map function twice, then converting the result into a set, and finally creating a new array from that set.

A more straightforward and readable approach would be to use a simple loop and maintain a list of numbers in the objects. If a number already exists, you can simply use the splice method to remove the object from the array.

Although this method does not generate a completely new array - as you are modifying the existing one - it is an effective solution.

const arr = [{ number: 1 },{ number: 2 },{ number: 3 },{ number: 4 },{ number: 1 },{ number: 4 }];

const numbers = new Set();

for (let i = arr.length - 1; i >= 0 ; i--) {
  const { number } = arr[i];
  if (numbers.has(number)) arr.splice(i, 1);
  numbers.add(number);
}

console.log(arr);

Answer 4

You seem to be complicating things unnecessarily. You are using the map function twice, then converting the result into a set, and finally creating a new array from that set.

A more straightforward and readable approach would be to use a simple loop and maintain a list of numbers in the objects. If a number already exists, you can simply use the splice method to remove the object from the array.

Although this method does not generate a completely new array - as you are modifying the existing one - it is an effective solution.

const arr = [{ number: 1 },{ number: 2 },{ number: 3 },{ number: 4 },{ number: 1 },{ number: 4 }];

const numbers = new Set();

for (let i = arr.length - 1; i >= 0 ; i--) {
  const { number } = arr[i];
  if (numbers.has(number)) arr.splice(i, 1);
  numbers.add(number);
}

console.log(arr);

Answer 5

Answer №3

There are no Map-based solutions posted yet, and in my opinion, using Map is the most efficient choice in terms of performance. Here is how I would approach it:

const src = [{key: 'a', value: 1}, {key: 'c', value: 3}, {key: 'b', value: 2}, {key: 'a', value: 1}, {key: 'c', value: 3}]

const dedupe = (arr, keyProp) => [
    ...arr
        .reduce((acc, obj) => 
            (acc.set(obj[keyProp], obj), acc), new Map)
        .values()
]

const result = dedupe(src, 'key')

console.log(result)

.as-console-wrapper{min-height:100%;}

Answer 6

There are no Map-based solutions posted yet, and in my opinion, using Map is the most efficient choice in terms of performance. Here is how I would approach it:

const src = [{key: 'a', value: 1}, {key: 'c', value: 3}, {key: 'b', value: 2}, {key: 'a', value: 1}, {key: 'c', value: 3}]

const dedupe = (arr, keyProp) => [
    ...arr
        .reduce((acc, obj) => 
            (acc.set(obj[keyProp], obj), acc), new Map)
        .values()
]

const result = dedupe(src, 'key')

console.log(result)

.as-console-wrapper{min-height:100%;}

Answer 7

Answer №4

The technique for creating a unique array of diverse objects (also discussed in this response) is as follows:

const distinctItems = DATA.filter((item, index) => 
  index === data.findIndex(a => a.Values === item.Values));

This method sifts through the initial array by choosing only those items that maintain their original index when searched sequentially. Essentially, it picks out the first instance of each object based on specified criteria.

Important: Take into consideration that some of your Values were represented as strings, while others were actual numbers. (Entries starting with 0 were saved as strings, such as '02'.) If you encounter scenarios where the same value might exist in both string and number formats, you have the option to use the less strict comparison == instead of ===. For example: a.Values == item.Values.

Answer 8

The technique for creating a unique array of diverse objects (also discussed in this response) is as follows:

const distinctItems = DATA.filter((item, index) => 
  index === data.findIndex(a => a.Values === item.Values));

This method sifts through the initial array by choosing only those items that maintain their original index when searched sequentially. Essentially, it picks out the first instance of each object based on specified criteria.

Important: Take into consideration that some of your Values were represented as strings, while others were actual numbers. (Entries starting with 0 were saved as strings, such as '02'.) If you encounter scenarios where the same value might exist in both string and number formats, you have the option to use the less strict comparison == instead of ===. For example: a.Values == item.Values.

Remove duplicated objects within an array based on a specified property

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Tips for showcasing a restricted amount of data with Angular.js

unable to modify the content within a div by clicking on a link

Executing functions in AJAX using JavaScript callbacks

Switching between nested lists with a button: A simple guide

Angularjs scope's parent id

Transfer the imageURI to a different HTML page

Tips for displaying a setCustomValidity message or tooltip without needing to submit the event

Can React Native support styling using server-side data?

What is the best way to update data in Highcharts with Vue 3?

Is there a way to determine if a string is empty, even if it contains hard returns?

Exploring Next.js: Comparing data fetching in getInitialProps(): server-side versus client-side

Identifying the HTML Hidden Attribute Using JavaScript Without Dependencies

I am facing difficulties with invoking the popOpen() function within my parameters in JS, HTML, and CSS

The confusing case of jQuery's e.preventDefault: Unable to submit form despite preventing default behavior

When I delete the initial element from the array, the thumbnail image disappears

Updating information with AJAX upon clicking a hyperlink

I'm having trouble getting Vue-Bootstrap to work with Django. Can anyone provide guidance on how to properly set it up?

Python multi-dimensional arrays and combining/appending elements

What are some effective ways to slow down the image transitions in a Javascript slideshow?

"Why is it that when using jQuery, the .fail method doesn't accept arguments to deliberately