Eliminate duplicate elements within an array by utilizing only vanilla JavaScript or TypeScript languages

I'm having trouble finding a way to remove duplicates from an array using pure JS or typescript for my Angular project, without relying on other libraries.

For example, I may have an array with duplicate entries like this:

data [0: {Id: 1, Definition: "House"},
      1: {Id: 1, Definition: "House"}]

My goal is to filter it so that only unique entries remain:

data [0: {Id: 1, Definition: "House"}]

Although I attempted to use the method below, I still end up with duplicate entries:

let uniqueArray = data.filter(function(item, pos) {
    return data.indexOf(item) == pos;
})

Answer №1

Here is a method to achieve your desired outcome:

To ensure that the value is not already present in your final array, you can utilize the 'some' function.

data = [{Id: 1, Definition: "House"}, {Id: 1, Definition: "House"}]

const finalOut = []
data.forEach((value) => {
    if (!finalOut.some(x=> (x.Id === value.Id || x.Definition === value.Definition))) 
   {
        finalOut.push(value)
    }
})

An alternative method is using 'reduce', providing a cleaner and more elegant solution:

const finalOut2 = data.reduce((acc, cur) => acc.some(x=> (x.Id === cur.Id || x.Definition === cur.Definition)) ? acc : acc.concat(cur), [])

@Ezequiel suggested that employing some within forEach or reduce results in a time complexity of n square. For larger datasets, it's advisable to avoid such time complexities. Here is an approach utilizing filter:

//All values from data are stored in lookupObj after filtering. 
//Checking if a value is filtered based on whether its key exists in lookupObj

const lookupObj = {} 
const finalOut3 = data.filter(
    x => {
        const is_unique = !(lookupObj[`Id_${x.Id}`] || lookupObj[`Id_${x.Definition}`])
        lookupObj[`Id_${x.Id}`] = true
        lookupObj[`Id_${x.Definition}`] = true
        return is_unique
    }
)

Answer №2

To retrieve a unique object from an array based on the Id key, you can use the array#reduce method to accumulate objects and then access all the unique objects using Object.values().

let data = [{Id: 1, Definition: "House"},{Id: 1, Definition: "House"}, {Id: 2, Definition: "House2"}, {Id: 2, Definition: "House2"}],
    result = Object.values(data.reduce((r, o) => {
      r[o.Id] = r[o.Id] || {...o};
      return r;
    },{}));
console.log(result);

Answer №3

If the key to uniqueness lies in the ID, then utilizing a Map or an ordinary Object can help in eliminating duplicates. When using a Map, objects with identical IDs will be stored in the same location, ensuring that only unique objects are retained (assuming the assumptions regarding IDs mentioned earlier hold true).

let data = [{Id: 1, Definition: "House"}, {Id: 1, Definition: "House"}];
let idToObj = {};
data.forEach((o) => idToObj[o.Id] = o);
let uniqueArray = Object.values(idToObj);

EDIT: If there is a scenario where objects may have the same ID but differ in other fields, leveraging a Map becomes essential as it can accept entire objects as keys:

let data = [{Id: 1, Definition: "House1"}, {Id: 1, Definition: "House2"}];
let map = new Map();
data.forEach((o) => map.set(o, true));
let uniqueArray = [...map.keys()];

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

What methods are used in TypeScript to verify Omit during the compilation process?

I'm puzzled by the functionality of this code when employing the Omit utility type: type Foo = { prop1: string; prop2: string; } const foo: Foo = { prop1: 'prop1', prop2: 'prop2' } console.log(foo) // {"prop1 ...

Picking specific elements of a cell in HTML table with Selenium

Recently, I have incorporated Selenium into my data collection process for a website that heavily utilizes JavaScript. While I have successfully extracted cells from the table, I am now faced with the challenge of isolating the specific "Individual" string ...

What is the best method to extract the string value from a dropdown menu?

Please help me obtain the value from a dropdown list correctly. I am using the Django-widget-tweaks library. Here is the code for the dropdown list field from which I want to retrieve the string value: <p >{{ form.category_column.label_tag }}</p& ...

Resource loading error: The server returned a 404 (Not Found) status code, as shown in the console

Click here I have a simple file structure where index.html, script.js, and login.js are all in the same root folder without any subfolders. The issue I'm facing is that although the connection to the database works fine, there seems to be a problem wi ...

Import an array of dynamic modules with Webpack that are known during compilation

For my project, I have the requirement to import specific modules whose actual paths are only known during compile time. Imagine having components/A.js, components/B.js, and components/C.js. In my App.js, I need to include a subset of these modules that w ...

Effortlessly generate various socket.io events within a node.js environment

Seeking advice on optimizing and following the DRY principle. My node server is functioning correctly, but I want to streamline the code for future developers. Currently, I have a series of events being set up in this manner: var debug = true; io.sock ...

Tips for extracting all of the "ids" in a Python array

I am extracting JSON data from an API, and the initial structure is as follows: { "result": { "elements": [ { "id": "SV_3s0FmbrNancSmsB", "name": "Test Survey", "ownerId": "sdfsdfasdf", "lastModified": "2016-08-09T21:33:27Z", "isAct ...

Why does passing a React state array to a component result in it becoming an array of arrays?

I am encountering an issue with the const value const [filesData, setFilesData] = React.useState<IFileData[]>([]); After that, I am trying to pass it to a child component {filesData.length > 0 && <FilesDataList filesData = {filesDat ...

Are the Div Tags displaying in a vertical alignment instead of a horizontal one?

I have 3 div elements, each with a width of 4. I want to align them all in a row but I am also using a toggle button to show these divs because by default their display is set to none. When the user clicks the toggle button, the divs will be shown to them. ...

Submitting an extremely large string to an Express server using JS

How can a large String be efficiently sent to a Node.js Express server? On my webpage, I am using Codemirror to load files from an Express server into the editor. However, what is the most effective method for sending "the file" (which is actually a bi ...

Conditions are in an angular type provider with AOT

I am facing an issue with my Angular project that is compiled using AOT. I am trying to dynamically register a ClassProvider based on certain configurations. The simplified code snippet I am currently using is below: const isMock = Math.random() > 0.5; ...

What is the best way to remove query string parameters prior to running a function when a button is clicked?

I'm facing an issue trying to implement a button that filters events based on their tags. The problem arises when the tag value in the query string parameter does not clear when other buttons are clicked. Instead, the new filter tag value adds up with ...

Unable to locate the 'typescript' module at <Path>. However, the tsc -v command displays logs

I have a project using nrwl/nx and I set up the workspace(morningharwood) and an app(portfolio) on my home computer (windows). Now, I have cloned the repository, installed the dependencies with yarn install, and attempted to run it on my mac. However, I en ...

Measuring JSON data with PHP through asynchronous requests

Looking to retrieve a specific count from a json dataset. Here is an example json format: { "tickets": [ { "url": "https://asd.zendesk.com/api/v2/tickets/1.json", "id": 1, "external_id": null, "via": { "channel": "sa ...

How can I detect a click event on an SVG element using JavaScript or jQuery?

Currently, I am developing a web application that utilizes SVG. However, I have encountered an issue: I am struggling to add a click event to each element within the SVG using jQuery. The problem arises when attempting to trigger the event; it seems like t ...

Server crashing as nodemon encounters mongoose issue

Currently, I am in the process of learning Node JS, Mongodb, and Express JS. My goal was to create a database using Mongodb Compass and store some data within it. However, every time I attempt to run my code, my nodemon server crashes after a few minutes o ...

"Despite encountering an error, the jQuery AJAX request remains active and continues to

Check out this code snippet I created. early_face_detect=$.ajax({ type: "POST", url: "earlydetect.py", timeout: 15000, success: function(respond) { var s=grab_early_details(respond); }, error: function(xmlhttprequest, textstatus, message) ...

The document reference is not valid. It must have an equal number of segments, but the reference cities/SF/landmarks has 3 segments

Hello! I am currently learning from the firestore tutorial Initially, they guide me to populate the database with the following data: import { collection, doc, setDoc } from "firebase/firestore"; const citiesRef = collection(db, " ...

Using a JavaScript loop to modify the color of the final character in a word

I am curious to find out how I can dynamically change the color of the last character of each word within a <p> tag using a Javascript loop. For example, I would like to alter the color of the "n" in "John", the "s" in "Jacques", the "r" in "Peter" ...

Previewing the small version, loading the URL into a container

Currently, I am working with jQuery's .load(url, ...) function to bring in a url and display it within a div. However, I am facing an issue where the result needs to be resized in order to fit correctly within the layout. Can anyone provide guidance o ...