CODEWITHSUNDEEP
javascripttypescript
onmyway
onmyway

Reputation: 1515

How to update/set the values of multiple Objects (with the same parameters) with the same values JavaScript/Typescript

What is the best way/how can I update two Objects with the same set of values?

The only method I know of, is by setting each property of each object concurrently. As per example below. Below I am using a method to populate the Objects, by passing the values as parameter in the method.

PLEASE NOTE: the individual parameter I pass in the method (populateIndividualDetails(individual: SelectedMemberIndividualData)) consists of many parameters I do not need, and is not in the format I desire. Hence the use of a method to assign the properties.

Additional Note: Both Objects I wish to populate have the same parameters, and is in the exact same format. The Objects have nested parameters.

Perhaps one could copy the 1st Object after it has been populated? 🤔

Example:

model = {
    initials: '',
    name: '',
        address: {
           streetName: '',
           ...
        }
    ...
}

initialValues= {
    initials: '',
    name: '',
        address: {
           streetName: '',
           ...
        }
    ...
}

populateIndividualDetails(individual: SelectedMemberIndividualData) {
    this.model.initials = individual.initials;
    this.initialValue.initials = individual.initials;
    ...
}

Upvotes: 0

Views: 1503

Answers (2)

Nick Parsons
Nick Parsons

Reputation: 50759

Rather than populating model and initialValues with empty key-value pairs, you could instead consider making an array of the properties which you want to be set in both the model and initialValues objects. Inside of populateIndividualDetails() you can then loop over this array with a for loop, and grab each property from the passed in individual object which you can then set on your model and initialValues objects.

const desiredProps = ["a", "b", "d"]; // contains "initials", etc...
const model = {};
const initialValues = {};
function populateIndividualDetails(individual) {
    for(const prop of desiredProps) {
      model[prop] = individual[prop];
      initialValues[prop] = individual[prop];
    }
}

populateIndividualDetails({a: 1, b: 2, c: 3, d: 4}); // ignore "c" value
console.log(model);
console.log(initialValues);

EDIT If you need model and initialValues to be populated initially, then it might be better to create one and deep-clone the other (as you mentioned you can have nested object properties) and then use recursion to handle the nested objects:

const model = {a: '', b: {c: ''}, e: ''};
const initialValues = JSON.parse(JSON.stringify(model)); // deep-clone model, both are their own object references.
function populateIndividualDetails(o1, o2, individual) {
  Object.keys(o1).forEach(key => {
    if(Object(o1[key]) === o1[key])
      populateIndividualDetails(o1[key], o2[key], individual[key])
    else
      o1[key] = o2[key] = individual[key];
  });
}

populateIndividualDetails(model, initialValues, {a: 1, b: {c: 2, d: 3}, e: 4, f: 5}); // ignore "f" value
console.log(model);
console.log(initialValues);

Upvotes: 1

Flavien Volken
Flavien Volken

Reputation: 21309

You can just destructurate and pick the properties of individual the following way:

function populateIndividualDetails({initials}: SelectedMemberIndividualData) {
    this.model.initials = initials;
    this.initialValue.initials = initials;
}

but if you have several properties you might want this but this will replace the entire model and initial value objects and they will point to the same object…

function populateIndividualDetails(individual: SelectedMemberIndividualData) {
    const {a, b, c} = individual;
    const copy = {a, b ,c}
    this.model= copy;
    this.initialValue= copy;
}

What you are probably looking for is to just add some properties to the existing model and initialValue objects

function populateIndividualDetails(individual: SelectedMemberIndividualData) {
    const {a, b, c} = individual;
    const propertiesToAdd = {a, b ,c}
    this.model= {...this.model, ...propertiesToAdd};
    this.initialValue= {...this.initialValue, ...propertiesToAdd};
}

Note:

anObject = {...anObject, ...anotherObject};// can be replaced with
Object.assign(anObject,anotherObject);

Using lodash you could also do this:

function getDefaultProperties(anObject: SelectedMemberIndividualData){
return _.pick(anObject, ['a','b','c'])
}

function populateIndividualDetails(individual: SelectedMemberIndividualData){
const defaultProperties = getDefaultProperties(individual);
[this.model, this.initialValue].forEach((value) => {
_.assign(value, defaultProperties);
})
}

Upvotes: 0

Related Questions