Angular - Compare two arrays with same number of objects but with different values and return the difference from second array

Question

I have 2 array of objects

arrayOne = [{objectType: 'License', objectId: 333, objectName: 'Test Object 1', dataType: 'String'}
        {objectType: 'Owner', objectId: 334, objectName: 'Test Object 2', dataType: 'String'},
        {objectType: 'Location', objectId: 335, objectName: 'Test Object 3', dataType: 'String'}]
        
arrayTwo = [{objectType: 'LICENSE', objectId: 333, objectName: 'Test Object 1', dataType: 'String'}
        {objectType: 'OWNER', objectId: 334, objectName: 'Test Object 4', dataType: 'Value List'},
        {objectType: 'LOCATION', objectId: 335, objectName: 'Test Object 3', dataType: 'String'}]

As we can see in arrayTwo, objectName and dataType is changed. It may be possible any of the property might change but the number of objects will be always same on both arrays.

So here, I need to pull the objects from arrayTwo which has been changed by comparing with arrayOne and store it in a new array say resultsArray?

I checked the answers provided in How to get the difference between two arrays of objects in JavaScript it only talks about getting the differences based on one property, not any property. Please suggest on this. Thanks.

EDIT: Edited arrayTwo to have capital letters for objectType. I need to ignore the case and result should be case insensitive. Thanks

Babis.amas · Accepted Answer · 2021-12-09T11:46:23.107

One option is to iterate through the first array elements, find the same element for the second array by its id and then check if any of its properties have changed:

arrayOne = [{
    objectType: 'License',
    objectId: 333,
    objectName: 'Test Object 1',
    dataType: 'String'
  }, {
    objectType: 'Owner',
    objectId: 334,
    objectName: 'Test Object 2',
    dataType: 'String'
  },
  {
    objectType: 'Location',
    objectId: 335,
    objectName: 'Test Object 3',
    dataType: 'String'
  }
]

arrayTwo = [{
    objectType: 'License',
    objectId: 333,
    objectName: 'Test Object 1',
    dataType: 'String'
  }, {
    objectType: 'Owner',
    objectId: 334,
    objectName: 'Test Object 4',
    dataType: 'Value List'
  },
  {
    objectType: 'Location',
    objectId: 335,
    objectName: 'Test Object 3',
    dataType: 'String'
  }
];

const changedObjects = arrayOne.filter(obj1 => {
  const obj2 = arrayTwo.find(x => x.objectId === obj1.objectId);
  return Object.keys(obj1).some(key => String(obj1[key]).toLowerCase() !== String(obj2[key]).toLowerCase());
});

console.log(changedObjects);

EDIT: The above example will return the element from the arrayOne. In case you need the element with the new values you can reverse arrayOne and arrayTwo inside the function.

Thanks for the response, in this example can I check with case insensitive manner for string values? For ex, on one array objectName is Owner and in 2nd array it is OWNER. In this case, I should ignore it. — vamsi, Dec 09 '21 at 11:07
@vamsi you just have to add `.toLowerCase()` after the 2 values you are comparing so that they both transform to "owner" which are equal. Notice that I also used the `String()` around the value because some of your object values are numbers where `.toLowerCase()` can't be apply. — Babis.amas, Dec 09 '21 at 11:51
@vamsi Forgot to mention that I edited my answer. If that covers your requirements make sure to upvote and accept it :) — Babis.amas, Dec 09 '21 at 12:05

Angular - Compare two arrays with same number of objects but with different values and return the difference from second array

1 Answers1