Compare and get difference from two object for patch api request in react js?

Question

im having two objects previous and new one, i trying to compare and get difference for those objects, send to as patch payload from patch api,

compare each properties in object if any of the property has any difference i want all those difference in new object as payload

How can i achieve this please help me find the solution? Is there any lodash method for this solution?

let obj = {
  Name: "Ajmal",
  age: 25,
  email: "ajmaln@gmail.com",
  contact: [12345678, 987654321],
  address: {
    houseName: "ABC",
    street: "XYZ",
    pin: 67891
  }
}

let obj2 = {
  Name: "Ajmal",
  age: 25,
  email: "something@gmail.com",
  contact: [12345678, 11111111],
  address: {
    houseName: "ABC",
    street: "XYZ",
    pin: 111
  }
}

result payload im expecting would look like

let payload = {
  email: "something@gmail.com",
  contact: [12345678, 11111111],
  address: {
    pin: 111
  }
}

Answer 1

Mista NewbeedRecursion to your service:

const compare = (obj1, obj2) => {
  const keys = Object.keys(obj1);

  const payload = {};

  keys.forEach((el) => {
    const first = obj1[el];
    const second = obj2[el];
    let check;
    if (first !== second) {
      if (first instanceof Object && !(first instanceof Array))
        check = compare(first, second);
      payload[el] = check || second;
    }
  });
  return payload;
};

Answer 2

Here is a approach with immer that may guide you to a proper solution This is not a generic approach but makes things easier by relying on immer

import produce, { applyPatches, enablePatches } from "immer";
import { difference } from "lodash";

// once in your app
enablePatches();

let obj = {
  Name: "Ajmal",
  age: 25,
  email: "ajmaln@gmail.com",
  contact: [12345678, 987654321],
  address: {
    houseName: "ABC",
    street: "XYZ",
    pin: 67891
  }
};

let obj2 = {
  Name: "Ajmal",
  age: 25,
  email: "something@gmail.com",
  contact: [12345678, 11111111],
  address: {
    houseName: "ABC",
    street: "XYZ",
    pin: 111
  }
};

Gettig the patch updates

 let fork = { ...obj };
    let changes = [];

    const updatedItem = produce(
      fork,
      (draft) => {

        // object specific updates
        draft.Name = obj2.Name;
        draft.age = obj2.age;
        draft.email = obj2.email;
        draft.address.houseName = obj2.address.houseName;
        draft.address.street = obj2.address.street;
        draft.address.pin = obj2.address.pin;
       const originalContact = original(draft.contact);
       const contactDiff = difference(obj2.contact, originalContact);
       console.log("diff", contactDiff);
       if (contactDiff?.length) {
         draft.contact = contactDiff;
       }

      },
      (patches) => {
        changes.push(...patches);
      }
    );

    //Problem here => default values need to be given to state
    // so the default values need to be excluded from the patch
    let state = { contact: [], address: {} };

    const patch = applyPatches(state, changes);

    console.log("patch", patch);

logs changes op

contact: Array(1)
0: 11111111
address: Object
pin: 111
email: "something@gmail.com"

Hope this helps you in some way

Cheers