How to eliminate or avoid duplicate entries in an array using Angular 2

Question

How to eliminate or avoid duplicate entries in an array using Angular 2

Within my component, I have set up a subscription to a subject that is returning employee records and storing them in an array.

importResults: ImportResults[] = [];

constructor(
    private _massEmpService: MassEmpService
) {
}

ngOnInit() {
    // Subscribing to the subject for added employees data
    this._massEmpService.importedData.subscribe(obj => {
        if (obj) {
            // Keeping imported data results unique
            this.importResults.push(_.uniqBy(obj, 'QID'));
        }
    });
}

The problem I am facing is that every time the button is clicked and new data is received through this subscription, it appends the new data to the existing array instead of adding only the new records that are not already present.

Here's an example with a single record received (entering one user name and clicking search)

https://i.sstatic.net/hK8bX.png

And here's an example where I add one more user while keeping the previous one in the search field.

https://i.sstatic.net/8Jhef.png

As seen, the first array represents the original search result. The second array contains both the initial employee and the new one.

My desired outcome is to have a single array with unique objects. In this case, there should be two records since the first employee was searched twice, meaning they shouldn't be duplicated in the array as the object already exists.

Could it be that I am using the lodash function incorrectly? Also, note that QID serves as a unique identifier within the object (not shown).

angular typescript lodash

Answer 1

Answer №1

If you want to simplify your code, consider using RxJS' distinct operator instead of manually checking for uniqueness:

this._massEmpService.data
   .filter(item => item)
   .distinct(source => source.ID)
   .subscribe(item => this.uniqueItems.push(item));

Answer 2

If you want to simplify your code, consider using RxJS' distinct operator instead of manually checking for uniqueness:

this._massEmpService.data
   .filter(item => item)
   .distinct(source => source.ID)
   .subscribe(item => this.uniqueItems.push(item));

Answer 3

Answer №2

Discover the first object you need and push it if not found, then add it. For instance:

importResults: ImportResults[] = [];
import * as _ from 'lodash';
constructor(
    private _massEmpService: MassEmpService
) {
}

ngOnInit() {
    // Subscribe to our subject that informs us about newly added employees
    this._massEmpService.importedData.subscribe(obj => {
        if (obj) {
            // Ensure uniqueness in imported data results
            const keyExists= this._find((obj);
                if(keyExists){
                   this.importResults.push(obj);
                }
        }
    });
   }

Create a find function within the component

  private _find(cur_obj: any): any{
                return _.find(this.importResults, function (importResult: any): boolean {
                   return importResult.QID === cur_obj.QID;
                });
 }

This is just an example. Customize it according to your own objects.

Answer 4

Discover the first object you need and push it if not found, then add it. For instance:

importResults: ImportResults[] = [];
import * as _ from 'lodash';
constructor(
    private _massEmpService: MassEmpService
) {
}

ngOnInit() {
    // Subscribe to our subject that informs us about newly added employees
    this._massEmpService.importedData.subscribe(obj => {
        if (obj) {
            // Ensure uniqueness in imported data results
            const keyExists= this._find((obj);
                if(keyExists){
                   this.importResults.push(obj);
                }
        }
    });
   }

Create a find function within the component

  private _find(cur_obj: any): any{
                return _.find(this.importResults, function (importResult: any): boolean {
                   return importResult.QID === cur_obj.QID;
                });
 }

This is just an example. Customize it according to your own objects.

Answer 5

Answer №3

One efficient method to eliminate duplicate items from an array involves targeting items with the same name:

var myArray= [ { 'name': 'Mac'}, {'name': 'Mac'}, {'name': 'John'} ,{'name': 'Edward'}];

console.log('----------------Before removing-------------');
console.log(myArray);
 myArray.forEach((item, index) => {
            if (index !== myArray.findIndex(i => i.name === item.name)) {
                myArray.splice(index, 1);
            }
            
        });
console.log('---------------After removing------------------');
console.log(myArray);

Answer 6

One efficient method to eliminate duplicate items from an array involves targeting items with the same name:

var myArray= [ { 'name': 'Mac'}, {'name': 'Mac'}, {'name': 'John'} ,{'name': 'Edward'}];

console.log('----------------Before removing-------------');
console.log(myArray);
 myArray.forEach((item, index) => {
            if (index !== myArray.findIndex(i => i.name === item.name)) {
                myArray.splice(index, 1);
            }
            
        });
console.log('---------------After removing------------------');
console.log(myArray);

Answer 7

Answer №4

To ensure fresh data, reset the variable importResults each time the subscription is executed. Update the {} within the subscription() function with the following code:

{
  if (obj) {
    this.importResults = [];
    // Keeping only unique results in imported data
    this.importResults.push(_.uniqBy(obj, 'QID'));
  }

Answer 8

To ensure fresh data, reset the variable importResults each time the subscription is executed. Update the {} within the subscription() function with the following code:

{
  if (obj) {
    this.importResults = [];
    // Keeping only unique results in imported data
    this.importResults.push(_.uniqBy(obj, 'QID'));
  }

Answer 9

Answer №5

This particular code snippet doesn't cover all scenarios involving object properties. I experimented by adding more properties to the array, but unfortunately, it didn't successfully eliminate duplicates.

var myArray= [ { 'name': 'Mac', 'id': '1', 'group_id': 66}, 
{'name': 'Mac', 'id': '2',  'group_id': 55},
{'name': 'John', 'id': '3',  'group_id': 66} ,
{'name': 'Edward', 'id': '4',  'group_id': 55}, 
{'name': 'Edward', 'id': '5',  'group_id': 70}];

console.log('----------------Before removing-------------');
console.log(myArray); myArray.forEach((item, index) => {
            if (index !== myArray.findIndex(i => i.group_id === item.group_id)) {
                myArray.splice(index+1, 1);
            }

        });
 console.log('---------------After removing------------------');
 console.log(myArray);

I then attempted a different approach with this piece of code which actually proved effective:

const data = [{name: 'AAA'}, {name: 'AAA'}, {name: 'BBB'}, {name: 'AAA'}];
function removeDuplicity(datas){
    return datas.filter((item, index,arr)=>{
    const c = arr.map(item=> item.name);
    return  index === c.indexOf(item.name)
  })`enter code here`
}

console.log(removeDuplicity(data))

Answer 10

This particular code snippet doesn't cover all scenarios involving object properties. I experimented by adding more properties to the array, but unfortunately, it didn't successfully eliminate duplicates.

var myArray= [ { 'name': 'Mac', 'id': '1', 'group_id': 66}, 
{'name': 'Mac', 'id': '2',  'group_id': 55},
{'name': 'John', 'id': '3',  'group_id': 66} ,
{'name': 'Edward', 'id': '4',  'group_id': 55}, 
{'name': 'Edward', 'id': '5',  'group_id': 70}];

console.log('----------------Before removing-------------');
console.log(myArray); myArray.forEach((item, index) => {
            if (index !== myArray.findIndex(i => i.group_id === item.group_id)) {
                myArray.splice(index+1, 1);
            }

        });
 console.log('---------------After removing------------------');
 console.log(myArray);

I then attempted a different approach with this piece of code which actually proved effective:

const data = [{name: 'AAA'}, {name: 'AAA'}, {name: 'BBB'}, {name: 'AAA'}];
function removeDuplicity(datas){
    return datas.filter((item, index,arr)=>{
    const c = arr.map(item=> item.name);
    return  index === c.indexOf(item.name)
  })`enter code here`
}

console.log(removeDuplicity(data))

Answer 11

Answer №6

Below is a snippet of code that has proven effective for me.

The first example checks if an array contains duplicate objects:

let hasDuplicate = false;
this.items.forEach((el) => {
            if (this.items.filter(x => x === el).length > 1) {
                this.hasDuplicate = true;
                return;
            }
        });

Next, the second example demonstrates how to extract unique objects from an array:

let uniqueArr = [];
this.items.forEach((el) => {
            if (this.items.filter(x => x === el).length === 1) {
                this.uniqueArr.push(el);
            }
        });

This code snippet may be beneficial for others facing similar challenges.

Answer 12

Below is a snippet of code that has proven effective for me.

The first example checks if an array contains duplicate objects:

let hasDuplicate = false;
this.items.forEach((el) => {
            if (this.items.filter(x => x === el).length > 1) {
                this.hasDuplicate = true;
                return;
            }
        });

Next, the second example demonstrates how to extract unique objects from an array:

let uniqueArr = [];
this.items.forEach((el) => {
            if (this.items.filter(x => x === el).length === 1) {
                this.uniqueArr.push(el);
            }
        });

This code snippet may be beneficial for others facing similar challenges.

How to eliminate or avoid duplicate entries in an array using Angular 2

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Including a hyperlink in a table using Angular 8

The instantiation of generic types in Typescript

The parameter cannot be assigned to type 'void' because it is of type 'Promise<unknown>'.ts(2345) - mockReturnValueOnce

The base component is not updating the property from the inherited component

Showing numeric values with decimals in an Angular Handsontable table

What is the process for incorporating personalized variables into the Material Ui Theme?

Pass the identical event to multiple functions in Angular 2

Lazy loading routes in Angular 2 that include auxiliary router outlets

Cyber Platform

Explore an array to find out the frequency of each object's usage

Styling and theming in PrimeNG

Formatting the Return Values of Ionic Select

What is the best way to handle .jsx files in my library bundling process with Rollup?

Angular 2 Mastering the Art of Saving State in Routing with Precision

Getting a specific element of the "Event" object using javascript/typescript

How can I specify the type of a property in Typescript?

Resetting Tabs in Child Component using React

Transferring the storage value to an Ionic 2 object

Access to property 'foo' is restricted to an instance of the 'Foo' class and can only be accessed within instances of 'Foo'

Combining Closure Compiler with Typescript