Compare arrays of objects and return new array of objects that are not in one of the arrays

Question

I have been having trouble trying to figure out how to get this to work.

Basically, I have two arrays. These arrays will contain objects.

The first array, is an array of objects containing the user's favourite stations.

The second array, is an array of objects containing the stations that need to be removed.

I'd like to compare the first and second array, and return a new array that contains the stations that were not in in the remove stations array...

For example...

const favourites = [{ station_name: 'Kyle of Lochalsh', crs_code: 'KYL' }, { station_name: 'Connel Ferry', crs_code: 'CON' }, { station_name: 'Oban', crs_code: 'OBN' }]

const toBeRemoved = [{ station_name: 'Kyle of Lochalsh', crs_code: 'KYL' }]

I would then expect an array containing the other 2 stations to be returned...

I have spent hours trying to figure out how to do it, but just doesn't seem to work!!

TIA

Please share the code you've been using. Note that in Javascript, object identity depends on their memory address, not the value of their attributes. — sal, May 02 '20 at 22:59
Check out this post https://stackoverflow.com/questions/1068834/object-comparison-in-javascript — sal, May 02 '20 at 23:00

score 3 · Answer 1 · edited May 03 '20 at 13:31

The following code demonstrates that two object with the same properties may not be considered equal:

const ob_1={color:'black', size:'big'},  
      ob_2={color:'black', size:'big'};  
console.log(ob_1==ob_2); // false

So we need to make a deep comparison always:

const favourites = [
  { station_name: 'Kyle of Lochalsh', crs_code: 'KYL' },
  { station_name: 'Connel Ferry', crs_code: 'CON' },
  { station_name: 'Oban', crs_code: 'OBN' }
];
const toBeRemoved = [
  { station_name: 'Kyle of Lochalsh', crs_code: 'KYL' }
];

console.log(

  // Array.filter applies our custom function to each item in the 
  // `favourites` array and returns a new (smaller) array containing
  // all items for which our custom function returns true
  favourites.filter(

    // Our custom function (using "arrow function" syntax) takes
    // a station object and uses `Array.some` to compare it to each 
    // item in the `toBeRemoved` array. Our custom function returns
    // true if the current station is not in `toBeRemoved`.
    (station) =>

      // Array.some takes another custom function which is applied
      // to each item in `toBeRemoved`, returning true if this 
      // custom function returns true for at least one item

      !toBeRemoved.some(
        // This custom function takes a station object (called `st`)
        // and "deeply" compares each property against the same 
        // property in the current station of the `favorites` 
        // array, returning true if both properties match

        (st) =>
          st.station_name == station.station_name &&
          st.crs_code == station.crs_code
      )
  )
);

This answer should work if the OP copy-pastes it with no understanding of what's going on -- but it would be a much better answer if it explained why this solution works and why we might prefer it to other possible solutions. — Cat, May 02 '20 at 23:33
Oh, yes... The following code demonstrates that different objects may have the same properties: `const ob_1={color:'black', size:'big'}, ob_2={color:'black', size:'big'}; console.log(ob_1==ob_2) //false ` So we need to make a deep comparison always... — Boris, May 03 '20 at 10:16

score 0 · Answer 2 · answered May 03 '20 at 13:39

You just need to filter the first on basis of second one like this -:

const favouriteArrayMap = favourites.reduce((acc, item) => ({...acc, [item.crs_code]: 1}), {});
const finalArr = favourites.filter(item => !favouriteArrayMap[item.crs_code]);

This is more optimal solution than to use .includes or .some and will run in linear complexity.

Compare arrays of objects and return new array of objects that are not in one of the arrays

2 Answers2