Retrieve the distinct elements between two objects within typescript/javascript angular

Question

Retrieve the distinct elements between two objects within typescript/javascript angular

I'm attempting to retrieve the change object from two objects using TypeScript in Angular.

For example

this.productPreviousCommand = {
"id": "60f910d7d03dbd2ca3b3dfd5",
"active": true,
"title": "ss",
"description": "<p>ss</p>",
"category": {
    "id": "60cec05df64bde4ab9cf7460"
},
"subCategory": {
    "id": "60cec18c56d3d958c4791117"
},
"vendor": {
    "id": "60ced45b56d3d958c479111c"
},
"type": "load_product_success"

}

model = {
"active": true,
"title": "ss",
"description": "<p>ss sss</p>",
"category": "60cec05df64bde4ab9cf7460",
"subCategory": "60cec18c56d3d958c4791117",
"vendor": "60ced45b56d3d958c479111c",
"tags": []

}

The difference between the two objects is

description: "<p>hello hello 1</p>"

. Therefore, I aim to return

{description: "<p>hello hello 1</p>"}

To achieve this, I incorporated lodash library from https://github.com/lodash/lodash

import { transform, isEqual, isObject, isArray} from 'lodash';

function difference(origObj, newObj) {
  function changes(newObj, origObj) {
    let arrayIndexCounter = 0
    return transform(newObj, function (result, value, key) {
      if (!isEqual(value, origObj[key])) {
        let resultKey = isArray(origObj) ? arrayIndexCounter++ : key
        result[resultKey] = (isObject(value) && isObject(origObj[key])) ? changes(value, origObj[key]) : value
      }
    })
  }
  return changes(newObj, origObj)
}

However, I encountered an issue with this library as it returns the entire object when using the code const

differenc = difference(this.productPreviousCommand, model);

The output generated by the above code snippet is

{
    active: true
    description: "<p>hello hello 1</p>"
    id: "60f8f29dd03dbd2ca3b3dfd1"
    title: "hello"
    }

javascript angular typescript lodash

Answer 1

Answer №1

Give this function a try

compareObjects(objA: any, objB: any): any {
        let differentProperties: any = {};
        for (const property in objA) {
            if (Object.prototype.hasOwnProperty.call(objA, property)) {
                if(objA[property] !== objB[property]) {
                    differentProperties[property] = objA[property];
                }
                
            }
        }

        return differentProperties;
    }

Answer 2

Give this function a try

compareObjects(objA: any, objB: any): any {
        let differentProperties: any = {};
        for (const property in objA) {
            if (Object.prototype.hasOwnProperty.call(objA, property)) {
                if(objA[property] !== objB[property]) {
                    differentProperties[property] = objA[property];
                }
                
            }
        }

        return differentProperties;
    }

Answer 3

Answer №2

To compare two objects, loop through each key in the first object and check for differences with the second object.

function findObjectDifferences(obj1, obj2) {
  return Object.entries(obj1).reduce((differences, [key, value]) => {
    // Check if the property exists in obj2.
    if (obj2.hasOwnProperty(key)) {
      const val = obj2[key];

      // Compare values of properties from both objects.
      if (val !== value) {
        return {
          ...differences,
          [key]: val,
        };
      }
    }

    // Return the updated differences or previous diff object.
    return differences;
  }, {});
}

const firstObj = {
  active: true,
  description: '<p>hello</p>',
  id: '60f8f29dd03dbd2ca3b3dfd1',
  title: 'hello',
};
const secondObj = {
  active: true,
  description: '<p>hello hello 1</p>',
  id: '60f8f29dd03dbd2ca3b3dfd1',
  title: 'hello',
};
const thirdObj = {
  active: true,
  description: '<p>hello hello 2</p>',
  id: '60f8f29dd03dbd2ca3b3dfd1',
  title: 'world',
};

console.log(findObjectDifferences(firstObj, secondObj));
console.log(findObjectDifferences(secondObj, thirdObj));

Answer 4

To compare two objects, loop through each key in the first object and check for differences with the second object.

function findObjectDifferences(obj1, obj2) {
  return Object.entries(obj1).reduce((differences, [key, value]) => {
    // Check if the property exists in obj2.
    if (obj2.hasOwnProperty(key)) {
      const val = obj2[key];

      // Compare values of properties from both objects.
      if (val !== value) {
        return {
          ...differences,
          [key]: val,
        };
      }
    }

    // Return the updated differences or previous diff object.
    return differences;
  }, {});
}

const firstObj = {
  active: true,
  description: '<p>hello</p>',
  id: '60f8f29dd03dbd2ca3b3dfd1',
  title: 'hello',
};
const secondObj = {
  active: true,
  description: '<p>hello hello 1</p>',
  id: '60f8f29dd03dbd2ca3b3dfd1',
  title: 'hello',
};
const thirdObj = {
  active: true,
  description: '<p>hello hello 2</p>',
  id: '60f8f29dd03dbd2ca3b3dfd1',
  title: 'world',
};

console.log(findObjectDifferences(firstObj, secondObj));
console.log(findObjectDifferences(secondObj, thirdObj));

Answer 5

Answer №3

function compareObjects(obj1, obj2) {
  const keysObj1 = Object.keys(obj1),
    keysObj2 = Object.keys(obj2);

  // check if objects have different lengths
  if (keysObj1?.length !== keysObj2?.length) {
    return;
  }

  // check for differences in keys between objects
  if (Object.keys(obj1).filter((key) => !Object.keys(obj2).includes(key))?.length) {
    return;
  }

  return Object.entries(obj1).reduce(
    (acc, [key, value]) => (obj2[key] !== value ? { ...acc, ...{ [key]: obj2[key] } } : acc),
    []
  );
}

const objectA = {
  active: true,
  description: '<p>hello</p>',
  id: '60f8f29dd03dbd2ca3b3dfd1',
  title: 'hello',
};

const objectB = {
  active: true,
  description: '<p>hello hello 1</p>',
  id: '60f8f29dd03dbd2ca3b3dfd1',
  title: 'hello',
};


console.log(compareObjects(objectA, objectB));

Feel free to test out this code snippet.

function compareObjects(obj1, obj2) {
  const keysObj1 = Object.keys(obj1),
    keysObj2 = Object.keys(obj2);

  // check if objects have different lengths
  if (keysObj1?.length !== keysObj2?.length) {
    return;
  }

  // check for differences in keys between objects
  if (Object.keys(obj1).filter((key) => !Object.keys(obj2).includes(key))?.length) {
    return;
  }

  return Object.entries(obj1).reduce(
    (acc, [key, value]) => (obj2[key] !== value ? { ...acc, ...{ [key]: obj2[key] } } : acc),
    []
  );
}

Answer 6

function compareObjects(obj1, obj2) {
  const keysObj1 = Object.keys(obj1),
    keysObj2 = Object.keys(obj2);

  // check if objects have different lengths
  if (keysObj1?.length !== keysObj2?.length) {
    return;
  }

  // check for differences in keys between objects
  if (Object.keys(obj1).filter((key) => !Object.keys(obj2).includes(key))?.length) {
    return;
  }

  return Object.entries(obj1).reduce(
    (acc, [key, value]) => (obj2[key] !== value ? { ...acc, ...{ [key]: obj2[key] } } : acc),
    []
  );
}

const objectA = {
  active: true,
  description: '<p>hello</p>',
  id: '60f8f29dd03dbd2ca3b3dfd1',
  title: 'hello',
};

const objectB = {
  active: true,
  description: '<p>hello hello 1</p>',
  id: '60f8f29dd03dbd2ca3b3dfd1',
  title: 'hello',
};


console.log(compareObjects(objectA, objectB));

Feel free to test out this code snippet.

function compareObjects(obj1, obj2) {
  const keysObj1 = Object.keys(obj1),
    keysObj2 = Object.keys(obj2);

  // check if objects have different lengths
  if (keysObj1?.length !== keysObj2?.length) {
    return;
  }

  // check for differences in keys between objects
  if (Object.keys(obj1).filter((key) => !Object.keys(obj2).includes(key))?.length) {
    return;
  }

  return Object.entries(obj1).reduce(
    (acc, [key, value]) => (obj2[key] !== value ? { ...acc, ...{ [key]: obj2[key] } } : acc),
    []
  );
}

Answer 7

Answer №4

If you need to compare two objects in TypeScript and find their differences, you can create a function that traverses the objects recursively and checks for variations in their properties. Here's an example of how you can implement this:

function findObjectDifferences(obj1: any, obj2: any): any {
  if (typeof obj1 !== 'object' || typeof obj2 !== 'object') {
    return obj1 !== obj2 ? [obj1, obj2] : undefined;
  }

  const keys1 = Object.keys(obj1);
  const keys2 = Object.keys(obj2);
  const allKeys = new Set([...keys1, ...keys2]);

  const differences: any = {};

  for (const key of allKeys) {
    const value1 = obj1[key];
    const value2 = obj2[key];

    if (typeof value1 === 'object' && typeof value2 === 'object') {
      const nestedResults = findObjectDifferences(value1, value2);
      if (nestedResults) {
        differences[key] = nestedResults;
      }
    } else if (value1 !== value2) {
      differences[key] = [value1, value2];
    }
  }

  return Object.keys(differences).length === 0 ? undefined : differences;
}

const object1 = {
  name: 'John',
  age: 30,
  address: {
    city: 'New York',
    zip: '10001',
  },
};

const object2 = {
  name: 'Jane',
  age: 28,
  address: {
    city: 'San Francisco',
    zip: '94101',
  },
};

const discrepancies = findObjectDifferences(object1, object2);
console.log(discrepancies);

Output

{
  "name": [
    "John",
    "Jane"
  ],
  "age": [
    30,
    28
  ],
  "address": {
    "city": [
      "New York",
      "San Francisco"
    ],
    "zip": [
      "10001",
      "94101"
    ]
  }
}

The findObjectDifferences function compares two objects, identifies their discrepancies, and returns an object detailing the distinctions between them. If no differences exist, it returns undefined. This sample demonstrates a comparison between two objects - object1 and object2, even accounting for nested objects.

Keep in mind that this is a basic illustration, and you may need to enhance it based on your unique requirements, accommodating diverse data types and special cases.

Answer 8

If you need to compare two objects in TypeScript and find their differences, you can create a function that traverses the objects recursively and checks for variations in their properties. Here's an example of how you can implement this:

function findObjectDifferences(obj1: any, obj2: any): any {
  if (typeof obj1 !== 'object' || typeof obj2 !== 'object') {
    return obj1 !== obj2 ? [obj1, obj2] : undefined;
  }

  const keys1 = Object.keys(obj1);
  const keys2 = Object.keys(obj2);
  const allKeys = new Set([...keys1, ...keys2]);

  const differences: any = {};

  for (const key of allKeys) {
    const value1 = obj1[key];
    const value2 = obj2[key];

    if (typeof value1 === 'object' && typeof value2 === 'object') {
      const nestedResults = findObjectDifferences(value1, value2);
      if (nestedResults) {
        differences[key] = nestedResults;
      }
    } else if (value1 !== value2) {
      differences[key] = [value1, value2];
    }
  }

  return Object.keys(differences).length === 0 ? undefined : differences;
}

const object1 = {
  name: 'John',
  age: 30,
  address: {
    city: 'New York',
    zip: '10001',
  },
};

const object2 = {
  name: 'Jane',
  age: 28,
  address: {
    city: 'San Francisco',
    zip: '94101',
  },
};

const discrepancies = findObjectDifferences(object1, object2);
console.log(discrepancies);

Output

{
  "name": [
    "John",
    "Jane"
  ],
  "age": [
    30,
    28
  ],
  "address": {
    "city": [
      "New York",
      "San Francisco"
    ],
    "zip": [
      "10001",
      "94101"
    ]
  }
}

The findObjectDifferences function compares two objects, identifies their discrepancies, and returns an object detailing the distinctions between them. If no differences exist, it returns undefined. This sample demonstrates a comparison between two objects - object1 and object2, even accounting for nested objects.

Keep in mind that this is a basic illustration, and you may need to enhance it based on your unique requirements, accommodating diverse data types and special cases.

Retrieve the distinct elements between two objects within typescript/javascript angular

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

How to Retrieve Data from a JSON Object with JavaScript

Implement lazy loading of content on scroll in Grails framework

Encountering the error "Object is not a function" while utilizing supertest/superagent within a forEach iteration

Looking to switch up the hide/show toggle animation?

Connecting table checkboxes to buttons in Angular 4.x: A step-by-step guide

AngularJS Expandable Table - Unlocking Limitless Possibilities

Centering Card Content in Angular Using Material Design

Libraries that automatically suggest options for integrating objects described by JSON schema

[Vue alert]: The event "lazyLoadError" was triggered with an undefined handler

Show an Array of Nested JSON API information on an HTML page using jQuery/JavaScript

Challenges with the Express server console

Encountering difficulties with image processing on a web page

What is the best method for distributing this array object?

Leveraging Angular component in codebases of AngularJS and Angular versions

Testing a TypeScript function with Jest by mocking a function that is invoked from a separate file

Creating a single form field with two inputs and applying custom styling in Angular Material can be achieved by following these steps

What is the method for updating a property in an object of a Typescript class?

I am struggling to understand how to work with constrained generic functions

Generating a task list in React and facing an issue related to an array

Ways to retrieve the currently selected id from the router within the next 14 steps