CODEWITHSUNDEEP
javascriptarraysreactjsobjectecmascript-6
Glory Raj
Glory Raj

Reputation: 17701

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

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;
  });
}`

Upvotes: 0

Views: 130

Answers (1)

Drew Reese
Drew Reese

Reputation: 202836

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.

Upvotes: 2

Related Questions