how to replace modified object in array of objects using react js

Question

i have object structure like this,

[{
"id":"8661c8c96df94ac78283360e0d1c86bd",
"modifiedObject":{....},
"originalObject":{...}
},
{
"id":"1525drd616dr17d78283360e0d1c86bd",
"modifiedObject":null,
"originalObject":{...}
},
{
"id":"6767srsr14542525276767cbd246464",
"modifiedObject":{....},
"originalObject":null
}]

I am finding an object with the id and get the inner object(if modified object present if not original object) and then modifying the data using below code

    const originalCopyObject = projObjs.find(s => s.id === projectObjectId);
    const targetCopyObject = originalCopyObject.modifiedObject || originalCopyObject.originalObject; // here in this case it always be one either modified or original object
    const targetMutatedCopyObject = cloneDeep(targetCopyObject);
    if (!targetMutatedCopyObject?.glazingOrGasMaterials.length) {
      targetMutatedCopyObject.glazingOrGasMaterials = [
        ...targetMutatedCopyObject.glazingGasMaterials,
        ...targetMutatedCopyObject.glazingSimpleMaterials,
      ];          
    }
    targetMutatedCopyObject.opaqueConstructions.forEach(transformConstructions);

Now targetMutatedCopyObject is having one of the modifiedObject or originalObject, How can I replace this targetMutatedCopyObject object in projObjs.

Could any one please let me know how to replace this tragetMutatedCopyObject in projObjs array of objects.

Many thanks in advance.

Updated Code :

   projObjs.map(projObj => {
    if (projObj.id === projectObjectId) {
      const targetCopyObject = projObj.modifiedObject || projObj.originalObject;
      const mutatedCopyObject = transformFormStateToMutationObject(targetCopyObject);
      if (projObj.modifiedObject) {
        return {
          ...projObj,
          modifiedObject: mutatedCopyObject
        };
      }
      if (projObj.originalObject) {
        return {
          ...projObj,
          originalObject: mutatedCopyObject
        };
      }
      return projObj;
    }
    return projObj;
  });
}`

Drew Reese · Accepted Answer · 2021-01-19 17:47:39Z

2

Generally you would copy, or map, the old object to a new object reference. If the id matches the currently mapped element, return new object with the updated/modified properties, otherwise return the current element.

projObjs.map((projObj) => {
  if (projObj.id === projectObjectId) {
    const targetCopyObject = projObj.modifiedObject || projObj.originalObject;

    const targetMutatedCopyObject = cloneDeep(targetCopyObject);

    if (!targetMutatedCopyObject?.glazingOrGasMaterials.length) {
      targetMutatedCopyObject.glazingOrGasMaterials = [
        ...targetMutatedCopyObject.glazingGasMaterials,
        ...targetMutatedCopyObject.glazingSimpleMaterials
      ];
    }

    targetMutatedCopyObject.opaqueConstructions.forEach(transformConstructions);

    return {
      ...projObj,
      modifiedObject: targetCopyObject
    };
  }

  return projObj;
});

Edit to return updated objects back into their original object keys

Factor the object update logic into a utility function and apply some branching logic on the modifiedObject and originalObject values in order to return an updated object back to the appropriate key.

projObjs.map((projObj) => {
  if (projObj.id === projectObjectId) {
    const updateObject = (targetCopyObject) => {
      const targetMutatedCopyObject = cloneDeep(targetCopyObject);
      if (!targetMutatedCopyObject?.glazingOrGasMaterials.length) {
        targetMutatedCopyObject.glazingOrGasMaterials = [
          ...targetMutatedCopyObject.glazingGasMaterials,
          ...targetMutatedCopyObject.glazingSimpleMaterials
        ];
      }

      targetMutatedCopyObject.opaqueConstructions.forEach(
        transformConstructions
      );

      return targetMutatedCopyObject;
    };

    if (projObj.modifiedObject) {
      return {
        ...projObj,
        modifiedObject: updateObject(projObj.modifiedObject)
      };
    }

    if (projObj.originalObject) {
      return {
        ...projObj,
        originalObject: updateObject(projObj.originalObject)
      };
    }

    return projObj;
  }

  return projObj;
});

Note: Be sure to capture the returned result from projObjs.map to update any parent object. This will be the new updated array.

edited Jan 19, 2021 at 17:47

answered Jan 18, 2021 at 19:10

Drew Reese

207k19 gold badges279 silver badges292 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Glory Raj Over a year ago

thanks for the suggestion, is this works for if projObj is only having originalObject not the modified object

Drew Reese Over a year ago

@EnigmaState If I understand this follow-on question, you're asking if this works if the original data object have only the originalObject (i.e. no modifiedObject) property? Yes, I believe so as the projObj.modifiedObject || projObj.originalObject will grab originalObject if no modifiedObject exists, apply the logic, and place the new modified object in the modifiedObject property, preserving the originalObject property (provided all your logic is correct and doesn't mutate it, which I think is the case since you deep clone it).

Glory Raj Over a year ago

oh sorry, i need to replace the exact object property, if projObj only having the originalObject then i should replace the existing with modifed originalObject property(here in case targetMutatedCopyObject) based on Id and do not want to preserve

Drew Reese Over a year ago

@EnigmaState Ah, so if the original object has a modifiedObject property and that is the one you update you want it to go back on the modifiedObject key, and if it has only the originalObject property you want it to go back on the originalObject key? Is this correct understanding?

Glory Raj Over a year ago

yeah that is correct, and it is always only one object property(either original or modified) present and other one is always null, is there any way to achieve this.

|

Collectives™ on Stack Overflow

how to replace modified object in array of objects using react js

1 Answer 1

Edit to return updated objects back into their original object keys

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Edit to return updated objects back into their original object keys

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related