What is the best method for deep merging two instances of ES6 classes similar to lodash?
The end result should be an instance of the same class with a deep merge of both instances' properties.
What is the best method for deep merging two instances of ES6 classes similar to lodash?
The end result should be an instance of the same class with a deep merge of both instances' properties.
If you do not need to instantiate a new object, simply use the code below:
_.merge(object1, object2)
With this code, the properties of object2 will be deeply merged into object1 while still keeping the prototype intact.
If you do need a completely new merged object, you can achieve it with the following code:
let newObject = Object.assign(Object.create(Object.getPrototypeOf(o1)), _.merge(o1, o2));
This code will create a fresh object that is an instance of the same class as o1, and it will perform a deep merge of the properties from both o1 and o2. However, be aware that there are some limitations to this approach, as mentioned in this source:
If the instance was constructed using closures extensively, it may be challenging to clone it accurately. It could be difficult to determine which internal values were set and how to replicate this setup.
My experience with Lodash merge was not successful when dealing with nested classes. Here's an example that demonstrates the issue:
class DeepEntity {
@Exclude({ toPlainOnly: true })
public id: string;
public test: string;
}
class Entity {
public id: string;
public test: string;
public deep: DeepEntity;
}
class DeepDto {
public test: string;
}
class Dto {
public test: string;
public deep: DeepDto;
}
const entity = plainToInstance(Entity, {
id: 'uuid',
test: 'entity',
deep: plainToInstance(DeepEntity, {
id: 'deep-uuid',
test: 'deep-entity',
}),
});
const dto = plainToInstance(Dto, {
id: 'uuid',
test: 'dto',
deep: plainToInstance(DeepDto, {
id: 'deep-uuid',
test: 'deep-dto',
}),
});
const merged = merge(entity, dto);
// WNG: The following fails.
expect(merged.deep instanceof DeepEntity).toBe(true);
To resolve this issue, I found success in using mergeWith along with a customizer function like the one below:
import { instanceToPlain } from 'class-transformer';
import { isArray, isObjectLike, mergeWith } from 'lodash';
function customizer(objArray, srcArray, key) {
// NOTE: Cast src to a plain object to prevent lodash from overriding prototypes.
if (isObjectLike(srcArray) && !isArray(srcArray))
return mergeWith(
objArray,
instanceToPlain(srcArray),
customizer({ idCustomizers, defaultIdCustomizer }),
);
}
Is there a way to reset the ng-model value in the controller after an ngChange event without needing to use a directive? <div ng-repeat="i in items"> <!-- Some DOM comes here --> <select ng-model="i.avail" ng-change="changeAvail(i. ...
With this code snippet, I have the ability to create lines using mouse points on a canvas. My goal is to identify when these lines connect to form a shape and then fill that shape with color. <script language="javascript" src="//ajax.googleapis.com/a ...
I am facing an issue in my VUE SPA where I have a component running a recursive countdown using setInterval functions. The problem is that the countdown continues running in the background even when I switch to another view, but I want to destroy the setIn ...
I've been working on developing a small music player program in React. Is there a way to import all these values together with a single import statement? I noticed that manually inputting the values into the props array doesn't work because the ...
Encountering a peculiar issue with my *ngIf related to the isAdmin variable which determines whether the list of users in userList should be displayed or not. Strangely, it seems to behave differently compared to other *ngIf statements within the same comp ...
I previously inquired about this issue, but I believe my wording was unclear and the responses focused on how to display or hide a group of divs when clicking a button. While I understand that concept, my specific challenge is slightly different. Let me pr ...
I'm facing an interesting scenario with my application. It consists of two main pages - one displaying user account statistics and the other allowing users to edit these statistics. Both pages are rendered on the server side. When I navigate to the fi ...
I am encountering a challenge in configuring a form with default WooCommerce country and states selection dropdowns. Essentially, my goal is to present the Country selection first, followed by the State selection based on the chosen country. For instance, ...
As I delve into the world of React and JavaScript, I find myself in the fast-paced prototyping stage. I can't help but ponder at what point developers choose to utilize frameworks like Next.js or Gatsby.js over the usual Create React App. I'm pa ...
I am seeking assistance from more experienced colleagues to help me understand the code below and implement it in my App. The main objective is to trigger a REDUX action from a button, which will delete an item from a database. Here is the code that curr ...
Imagine a scenario where my website contains textbox elements that are dynamically generated, each with the class 'mytxt'. <input type="text" class="mytxt" /> <input type="text" class="mytxt" /> <input type="text" class="mytxt" /& ...
When I pass data received from an API to the client using EJS, I am struggling to access the JSON array on the client side. On the server side, I successfully send the returned data to the client like this: fetch(url) .then(res => res.json()) .the ...
As I continue working on this function, a question arises regarding the safety of changing variables in this manner. In my Angular service, I utilize utility functions where context represents this from the component calling the function. The code snippet ...
Recently, I stumbled upon a tutorial discussing authentication in AngularJS. The tutorial showcased an AuthenticationService that was structured similarly to this: angular.module("auth").factory("AuthenticationService", function ($http, $sanitize) { ...
I believe they were identical because both extracted the content from the store. What could potentially differentiate them? ...
const [selectedCountry, setSelectedCountry] = useState(); <Autocomplete autoHighlight={true} //required autoSelect={true} id="geo-select-country" options={availableCountries} value={se ...
We have encountered an issue with a translation library that is affecting the functionality of our page. <html lang="en" class="notranslate translated-ltr"> <meta name="google" content="notranslate"> As ...
I'm currently working on a todo list project using AngularJS and I am wondering if there is a method to automatically focus on an input box after creating it by clicking on a button. As of now, the save function in my controller looks like this: $sc ...
Seeking a way to incorporate the google diff/match/patch lib into an Angular application for displaying the variance between two texts. Here's how I plan on using it: public ContentHtml: SafeHtml; compare(text1: string, text2: string):void { var ...
I have implemented an express route to handle password resets, which includes finding the user and performing some error handling. However, I am now faced with the challenge of adding additional error handling within a nested function, and I am uncertain a ...