Eliminating repetitions in a collection of objects

Recently I started working with TypeScript and encountered an issue while trying to eliminate duplicate objects based on a specific property, which in my case is the ID. Even though I attempted to use the filter method, I couldn't achieve the desired outcome. I've shared my code below. Can someone please provide some guidance? The list contains instances of an employee type, and I have defined a model class for employee. Since there may be duplicates IDs due to erroneous data, I need to find a way to remove these duplicates from the list before displaying it on the UI.

I also attempted to convert it to a set but unfortunately that approach didn't yield the expected results.

     ids : Employee[] = new Array<Employee>();
     this.list.filter((this.list=> ids.includes(this.list.idPk) ? false : ids.push(this.list.idPk));

Answer №1

employeeList : Employee[] = new Array<Employee>();

 var updatedList  = this.list.filter(list => !employeeList.includes(list.idPk));
 employeeList.concat(updatedList)

Answer №2

Apologies for the delayed response, I was swamped with work on my current project and had to prioritize that over my learning. Thank you for your feedback, I attempted to address the issue but encountered an exception related to semicolons even though I made sure they were all in place. Just to clarify, this list may contain duplicate products with identical ids. My goal is to eliminate duplicates based on the product id.


private productList: Product[] = new Array<Product>();
private uniqueList: Product[] = new Array<Product>();

this.uniqueList  = this.productList.filter(
products => !this.uniqueList.includes(products.id));
this.productList = this.uniqueList;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Encountering Error when Attempting to Load Webpack Dependencies for Browser

I'm currently in the process of manually scaffolding an Angular 6 app (not using the CLI). Everything was going smoothly until I encountered a webpack error: ERROR in window is not defined After researching online, it seems like I may be missing som ...

Using Typescript for defining regular expressions as enum values

When making API calls from an API in typescript, I want to clarify how the response should look by using an interface. One particular value is a string that can only have specific values. Isn't this what enums are for? The possible values are: " ...

Encountering the error "TS(2604): JSX element type 'App' does not have any construct or call signatures" while trying to export an array of JSX Elements

I have a function that returns an array of JSX Elements. When I pass this to ReactDOM.render, I encounter the error mentioned above. wrappers.tsx const FooterWithStore:React.FC = () => ( <Provider store={store}> <FooterLangWrapper ...

What is the best way to create an interface tailored to a specific scenario using TypeScript?

In my TypeScript project without React, I am dealing with an interface structured like this: export interface LayerStyling<T> { attribute: string; value: AllowedTypes; type: LayerTypes; layout?: { icon: string }; state ...

Specify the data type of a nested object in a React component with TypeScript

Interface Button{ buttonTitle: { name?: string; } } What is the best way to specify a type for the buttonTitle property? ...

Error encountered during NextJS build - file or directory not found for 500.html

I recently made the switch from Page Router to App router. Transitioning pages - 500.tsx to app - 500 - page.tsx However, I encountered an error when running yarn build/next build: > Build error occurred [Error: ENOENT: no such file or direc ...

Deploying Angular CLI project to Heroku

I encountered an issue while following this tutorial on how to deploy my Angular CLI application to Heroku. When attempting to push to the Heroku remote, I received the following error message: The error message displayed was as follows: > <a href= ...

Examining the function of a playwright script for testing the capability of downloading files using the window.open

Currently, we are working on a project that uses Vue3 for the frontend and we are writing tests for the application using Playwright. Within our components, there is a download icon that, when clicked, triggers a handler to retrieve a presigned URL from S3 ...

Angular Table Expansion Panel: Expanding Your Data in Style

Recently started exploring Angular and struggling to find a straightforward method to incorporate a table with an expansion slider containing dropdown menus. You can view the wireframe design Gif I created using Javascript by visiting this link: https://i ...

I am able to upload an image using ImagePicker.openPicker in my React Native app, however, I am encountering difficulties

Currently, I am in the process of developing an application using react native. Within the app, users have a profile image that can be updated by either selecting one from the gallery or capturing a new one with the camera. The library utilized for this ...

Is there a way to update components in Angular without affecting the current URL?

I want to update a component without changing the URL. For example, I have a component called register. When I visit my website at www.myweb.com, I would like to register by clicking on sign up. How can I display the register component without altering the ...

Error: Unable to access properties from an undefined source while trying to read 'reRenderOnLangChange'

I encountered an issue in my Angular project where my unit tests are failing with the following error message: TypeError: Cannot read properties of undefined (reading 'reRenderOnLangChange') at shouldListenToLangChanges (node_modules/@ngneat/tr ...

The browser failed to display the SVG image, and the console log indicated that the promise was rejected, with the message "false."

I'm struggling to understand why my SVG isn't showing up on the screen. The console log is displaying "false," which I believe indicates that a promise was rejected Here is the TypeScript file I am working with: export class PieChartComponent im ...

The optimal time to register for events within the Vue lifecycle

Currently, I am developing a Vue2 component using vue-component that includes a subcomponent. Here is an example: <note :bus="bus" :itemId="selectedId"></note> The subcomponent contains the following code snippet: <textarea v-model="text" ...

Encountered an issue in Angular 2 when the property 'then' was not found on type 'Subscription'

I have been attempting to call a service from my login.ts file but I am encountering various errors. Here is the code snippet in question: login.ts import { Component } from '@angular/core'; import { Auth, User } from '@ionic/cloud-angular ...

Struggling with increasing values in an array in Angular

I'm encountering a challenge in my Angular project. The issue arises when the user selects an employee from a combo box in the program. Once the selection is made, the array corresponding to that employee is set as selectedEmployee. Subsequently, in a ...

Ionic 5.9.1 and Angular 12 FormControlName

Currently, I am delving into the realm of Reactive Forms with Angular 12 and Ionic 5.9.1 on my app. To my surprise, upon checking the latest documentation on the https://ionicframework.com/docs/api/input#properties Ionic website, I realized that there is n ...

Utilizing Angular Routing for Lazy Loading Modules Triggers Automatic Redirect

Having an Angular2 app with basic routing, my current configuration is as follows: const routes: Routes = [ { path: 'detail', outlet: 'primary', component: DetailComponent }, { path: 'user', outlet: 'primary&apos ...

The specified 'IArguments' type does not qualify as an array type

Currently working on crafting a personalized logger. It's a fairly straightforward process, but I'm running into some errors that are muddying up my output. Here's what I have so far: @Injectable() export class Logger { log(...args: any ...

Tips for fixing the error message of "Cannot access value property of null"

I am facing an issue in my Angular application where I need to conditionally display a div based on certain criteria. Initially, when the page loads, there are no console errors and the div is not shown due to the ngIf condition being false. However, upo ...