Can anyone share a fast and simple method to combine two arrays in Angular2/Typescript (ES6) without duplicates?
By the way, these arrays have nested objects.
I've been searching for solutions online, but there are so many different options. I attempted some of the suggestions from this page, however, none of them seemed to work for me.
Appreciate any help you can provide!
This solution does not specifically pertain to angular2/typescript; rather, it utilizes ES6 functionality.
To remove duplicates from an array, you can use the uniq function from lodash (https://lodash.com/docs/4.17.4#uniq). Here's an example of how to apply it:
const arrA = [1, 2, 3, 4];
const arrB = [3, 4, 5, 6];
const arr = _.uniq([...arrA, ...arrB])
// Result: [1, 2, 3, 4, 5, 6]
If dealing with nested objects, consider using uniqBy or uniqWith, which are also part of lodash.
const arrA = [{id: 1, n: 'e'}, {id: 2, n: 'z'}];
const arrB = [{id: 2, n: 'z'}, {id: 3, n: 'c'}];
const arr = _.uniqBy([...arrA, ...arrB], 'id')
// Result: [{id: 1, n: 'e'}, {id: 2, n: 'z'}, {id: 3, n: 'c'}]
It is essential to have a unique identifier (like id) to identify and eliminate duplicates accurately.
[EDIT] If lacking a unique identifier and aiming to deduplicate based on entire objects, you can achieve this as shown below:
const arrA = [{a: 'a'}, {b: 'b'}];
const arrB = [{b: 'b'}, {c: 'c'}];
const arr = _.uniqBy([...arrA, ...arrB], JSON.stringify)
// Result: [{a: 'a'}, {b: 'b'}, {c: 'c'}]
This method converts objects into strings for comparison, but be cautious with performance implications when working with large objects/arrays. It is advisable to have a unique identifier whenever possible.
If you utilize TypeScript, you can accomplish it in the following manner:
const a = [1, 2, 3];
const b = [2, 3, 4, 5];
result = a.concat(b.filter(x => a.every(y => y !== x))); //[1, 2, 3, 4, 5];
By using
b.filter(x => a.every(y => y !== x))function mergeArraysWithoutDuplicates(arrays: any[]){
var result = [];
for(const array in arrays){
result = result.concat(array.filter(x => result.every(y => y !== x));
}
return result;
}
This code snippet is not yet tested, but should provide an outline based on your requirements. Upon execution, the function will yield a new array devoid of any duplicate elements.
Within my file (handlers.ts), I have a function designed to post data to a dynamic API route while utilizing the app router. This function requires values and a URL for fetching. However, when I pass the URL as a prop like this: http://localhost:3000/unde ...
Within my Angular service, I have an Observable that showcases a countdown timer for a user's e-commerce order when they reach a specific route after adding items to their cart. Although it functions correctly the first time an order is initiated, if ...
Is there a way to generate an array containing the names of members of a specific type in an expression? For example: export type FileInfo = { id: number title ?: string ext?: string|null } const fileinfo_fields = ["id","ext&qu ...
After noticing that the ngOnInit() method does not get called when returning to an already instanced page, I am looking for an alternative method. I need a function that is executed every time the specific page is visited. UPDATE I have tested onPageWillE ...
Is it possible for JhiEventManager to handle multiple subscriptions, or do I need a separate subscription for each event? Will the destroy() method of JhiEventManager handle multiple subscriptions as well? export class SomeComponent implements OnInit, OnDe ...
I found this code snippet to help with dynamic component loading: loadComponent(name) { var url = this.configurationService.configuration.api_url+"/generator/dynamic-loading/component/"+name; this.http.get(url, {responseType: 'text'}). ...
In my React JS application, I am using the following code: <button onClick={tes} type="button">click</button> This is the tes function that I'm utilizing: const tes = (id: string) => { console.log(id) } When hovering ov ...
Currently, I am working on a project that involves creating an addin for Office. The challenge I am facing is opening other pptx files from within the addin. After some research, I discovered that I need to use base64 for the PowerPoint.createPresentation( ...
In my Angular 11 project, I'm using @angular/material, @ngx-translate, and a library called icell-data-table. After successfully running the example project from the GitHub page on my local setup, I tried to replicate it on a Stackblitz demo and enco ...
In this snippet, you will find my oninit method which I am instructed not to modify. ngOnInit(): void { this.setCustomizedValues(); this.sub = PubSub.subscribe('highlightEntity', (subId, entityIdentifier: string) => { ...
Searching for a way to easily create a thumbnail from a video for uploading alongside the video itself to a server? I've been looking for JavaScript libraries to simplify the process without much luck. The scenario involves the user selecting a video ...
I am exploring the potential for allowing users to insert their own code into a Node application that is running an express server. Here's the scenario: A user clicks 'save' on a form and wants to perform custom business validations. This ...
Encountering an issue while trying to use the ternary operator to determine which React Hook to utilize. The error message states: "React Hook "useIsolationDynamicPhase" is called conditionally. React Hooks must be invoked in the same order during every co ...
With the for attribute, we can connect a label to a control, such as an <input>, so that clicking on the label focuses on the control. That's pretty neat. Here's a question that might sound a bit silly. How about the reverse? Is there a wa ...
I am currently working with Angular2 components that encapsulate a jQuery library called TimelineJS3. Everything is functioning correctly, but now I need to write tests. Specifically, I am trying to listen for click events using Renderer2. However, I have ...
While working in VS Pro, I am a beginner developer in TypeScript (as well as React and Node...). I am focused on truly understanding how these technologies integrate and function together, rather than simply copying commands and code snippets into files. ...
This is my unique html element: <ng-container> <span *ngIf="row.messageText && row.messageText.length >= 30 && expanded">{{row.messageText.substr(0, 25)}} <span>more</span> </span> ...
I encountered an issue while trying to access a property of a static array that I created in a TypeScript class. The error message I received is as follows: ERROR TypeError: Cannot read property 'forbiddenProjectNames' of undefined Below is th ...
Software Version: v12.19.0 Operating System Platform: Linux ayungavis 5.4.0-48-generic #52~18.04.1-Ubuntu SMP Thu Sep 10 12:50:22 UTC 2020 x86_64 x86_64 x86_64 GNU/Linux Subsystem: Steps to Reproduce the Issue I attempted to follow the tutorial provided ...
Is it possible to enforce the copy function to extend the original function, even when the parameters of the fnGenerator are in reverse order? Can this be achieved? function fnGenerator<Original extends Copy, Copy extends Function>(copy:Copy,origina ...