Having trouble with making the function to remove duplicate items from a JavaScript array?

Question

Having trouble with making the function to remove duplicate items from a JavaScript array?

Before anything else, I want to acknowledge that there are numerous answers on SO regarding this issue. However, I am encountering some difficulties with them, which is why I am posting a new question on the topic.

Here is my Array of Objects:

0: {id: 'lAYOUT', label: 'lAYOUT', items: 'val1'}
1: {id: 'tecst', label: 'tecst', items: 'val1'}
2: {id: 'tecst', label: 'tecst', items: 'val1'}

I am attempting to filter out so that there are only 2 unique values, as there are 2 duplicate objects in the array. My goal is to create distinct objects based on items and label.

This is how I am trying to achieve it using lodash:

const filteredArray = uniq(nestedItems, (item, key, a) => item.items && item.label)

However, it keeps returning all 3 elements instead.

I also tried the following approach:

const filteredArray = [...new Set(nestedItems)]

javascript arrays unique

Answer 1

Answer №1

Utilizing the Filter method to extract the specific object's value, index, and array. By using the FindIndex function, we can target a particular object within the array. Then, we compare the filter object with the findindex object, pushing it into a new array if they do not match, resulting in a unique array!

Give this code snippet a try!

 let arr = [{ id: 'lAYOUT', label: 'lAYOUT', items: 'val1' },
    { id: 'tecst', label: 'tecst', items: 'val1' },
    { id: 'tecst', label: 'tecst', items: 'val1' }];

    let newArr = arr.filter((value, index, self) =>
      index === self.findIndex((t) => (
        t.label === value.label && t.items === value.items
      ))
    );
    console.log(newArr, 'newArr');

Answer 2

Utilizing the Filter method to extract the specific object's value, index, and array. By using the FindIndex function, we can target a particular object within the array. Then, we compare the filter object with the findindex object, pushing it into a new array if they do not match, resulting in a unique array!

Give this code snippet a try!

 let arr = [{ id: 'lAYOUT', label: 'lAYOUT', items: 'val1' },
    { id: 'tecst', label: 'tecst', items: 'val1' },
    { id: 'tecst', label: 'tecst', items: 'val1' }];

    let newArr = arr.filter((value, index, self) =>
      index === self.findIndex((t) => (
        t.label === value.label && t.items === value.items
      ))
    );
    console.log(newArr, 'newArr');

Answer 3

Answer №2

Utilize hash grouping for filtering by multiple keys:

const data = [{ id: 'lAYOUT', label: 'lAYOUT', items: 'val1' }, { id: 'tecst', label: 'tecst', items: 'val1' }, { id: 'tecst', label: 'tecst', items: 'val1' }];

const unique = Object.values(data.reduce((acc, obj) => {
  const hash = `${obj.id}-${obj.label}`;
  acc[hash] = obj;
  return acc;
}, {}));

console.log(unique);

.as-console-wrapper{min-height: 100%!important; top: 0}

Same outcome using lodash

const data = [{ id: 'lAYOUT', label: 'lAYOUT', items: 'val1' }, { id: 'tecst', label: 'tecst', items: 'val1' }, { id: 'tecst', label: 'tecst', items: 'val1' }];

const result = _.uniqWith(data, (o1, o2) => `${o1.id}-${o1.label}` === `${o2.id}-${o2.label}`);

console.log(result);

.as-console-wrapper{min-height: 100%!important; top: 0}

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.js" integrity="sha512-2iwCHjuj+PmdCyvb88rMOch0UcKQxVHi/gsAml1fN3eg82IDaO/cdzzeXX4iF2VzIIes7pODE1/G0ts3QBwslA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Answer 4

Utilize hash grouping for filtering by multiple keys:

const data = [{ id: 'lAYOUT', label: 'lAYOUT', items: 'val1' }, { id: 'tecst', label: 'tecst', items: 'val1' }, { id: 'tecst', label: 'tecst', items: 'val1' }];

const unique = Object.values(data.reduce((acc, obj) => {
  const hash = `${obj.id}-${obj.label}`;
  acc[hash] = obj;
  return acc;
}, {}));

console.log(unique);

.as-console-wrapper{min-height: 100%!important; top: 0}

Same outcome using lodash

const data = [{ id: 'lAYOUT', label: 'lAYOUT', items: 'val1' }, { id: 'tecst', label: 'tecst', items: 'val1' }, { id: 'tecst', label: 'tecst', items: 'val1' }];

const result = _.uniqWith(data, (o1, o2) => `${o1.id}-${o1.label}` === `${o2.id}-${o2.label}`);

console.log(result);

.as-console-wrapper{min-height: 100%!important; top: 0}

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.js" integrity="sha512-2iwCHjuj+PmdCyvb88rMOch0UcKQxVHi/gsAml1fN3eg82IDaO/cdzzeXX4iF2VzIIes7pODE1/G0ts3QBwslA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Answer 5

Answer №3

const information = [
  { id: 'id1', description: 'description1', content: 'content1' }, 
  { id: 'id2', description: 'description2', content: 'content2' },
  { id: 'id1', description: 'description1', content: 'content2' }
];

const filterUnique = (...keys) => [
    ...new Map(information.map(info => [keys.map(key => info[key]).join(), info])).values()
];

console.log(1, filterUnique('description'));
console.log(2, filterUnique('description','content'));

Answer 6

const information = [
  { id: 'id1', description: 'description1', content: 'content1' }, 
  { id: 'id2', description: 'description2', content: 'content2' },
  { id: 'id1', description: 'description1', content: 'content2' }
];

const filterUnique = (...keys) => [
    ...new Map(information.map(info => [keys.map(key => info[key]).join(), info])).values()
];

console.log(1, filterUnique('description'));
console.log(2, filterUnique('description','content'));

Having trouble with making the function to remove duplicate items from a JavaScript array?

Answer №1

Answer №2

Answer №3

Similar questions

I'm looking for a JQuery plugin that can lock an element in place as you scroll through a webpage

My custom function is not invoking the Firebase function createUserWithEmailAndPassword

Converting Arrays to Strings in JavaScript

Find elements that are not contained within an element with a specific class

Include the data-title attribute within the <td> elements of my datatables

retrieve: add elements to an array

Steps for deploying an ejs website with winscp

developing an associative object/map in JavaScript

Display a preview of a React component

Easily use Discord.JS 13 slash commands to generate an embed displaying a user's specific role within a server

How can I use jQuery to set up form validation for an input textfield?

Passport appears to be experiencing amnesia when it comes to remembering the user

Leveraging the $dirty property in AngularJS to determine if any changes have been made to a form

The PageMethods function is successful when using a single parameter, but encounters an error when attempting to use two parameters, resulting in the

Issue with React/D3.js Density Plot - Error: The <path> attribute d is expecting a number, but received "M10,NaNL12,NaNC14,Na…"

How can I avoid duplicating code in HTML? I find myself utilizing the Bootstrap 4 collapse feature around 20 times on a single page

Discovering the greatest difference in length between strings from two arrays

The removal of an object becomes unsuccessful when objects with lower indices have been deleted beforehand

The $(document).ready function may not be compatible with Internet Explorer

Substitute names and make copies in a bash associative array