We have 2 arrays of objects of the same class. How to substract the 1st from the 2nd, based only on one property?

So this is the first technical post I am writing. It is mostly destined to my future self, but also, I am not really satisfied with the answer to the problem, I would love to have reviews on how I could improve the method.

I am currently working on the refactoring of an application. I have already written about it in other posts.
On of the biggest problems about that is that I am often confronted to necessity of working in the context of the application, using the pattern of the objects that the application needs, opposite to building this context.
It leads sometimes to problems to trying to improve solutions in a more efficient way than before, but still limited by the "guidelines" of the legacy code.

The problem

So after having implemented class patterns in the application, I found myself with the following problem :

I have a class with properties that will serve to populate a React Component.

The first send a simple array of string :

[
   {
      label:'label1',
      visible:false,
      otherProp:'something'
   },
   {
      label:'label2',
      visible:false,
      otherProp:'something'
   }
]

The second send an array of objects :

[
   {
      label:'label1',
      otherProp:'something'
   },
   {
      label:'label2',
      otherProp:'something'
   }
   {
      label:'label3',
      otherProp:'something'
   }
   {
      label:'label4',
      otherProp:'something'
   }
]

Both label properties refers to the same values.
And every objects will be converts to the same class.

The objective is to substract the first list from the second one, because their properties 'visible' is set at false.
And I want to do it with the smallest O that I can, and with not too much verbose.

EDIT :
To be more clear, I add the expected result of the function :

[
   {
      label:'label3',
      otherProp:'something'
   }
   {
      label:'label4',
      otherProp:'something'
   }
]

My solution

So first I identify the property of reference, here is 'label'.
I will extract the values of 'label' that must be eliminated from the bigger array.

Then I must compare the values of the result to the bigger array. Each element must be different from all the values of the smallest one.

const substractObjectsFromArray = (arrayTotal, arrayToSubstract, propertyOfReference) => {
   /* extract the list of values to substract */
   let extractValue = (arrayToSubstract, propertyOfReference) => arrayToSubstract.map(element => element[propertyOfReference]);

   /* substract the element based of the list */
   let arrayResult = (arrayTotal, arrayToSubstract, propertyOfReference) => 
       arrayTotal.filter(element => 
            extractValue(arrayToSubstract, propertyOfReference).every(ele => element.label !== ele) === true)
   return arrayResult(arrayTotal, arrayToSubstract, propertyOfReference);
}

So I tried my best to be the most efficient I could with the context I had. But I still lack a lot of experience and knowledge. Maybe there is a design pattern or data structure that could have more easily answered my problem, if so please share, I would love to learn about it.

Thanks for reading

Comments

[Dhilip kumar]

I'm no expert just tried.

Not tested.

Store all the various props of arrayToSubtract in an Object.

var referenceObj = {}
arrayToSubstract.forEach((item) => referenceObj[item[propertyOfReference]] = true;);

//Reference object keys should not be in arrayTotal

var outputArr = arrayTotal.filter((item) => !referenceObj[item[propertyOfReference]);

[AxelleDRouge]

Interesting way to resolve the problem, it should work :)

[Duy K. Bui]

First of all:

1. Why would you define functions within your function and call them each only once? I would just skip all those arrow functions.
2. Use const in place of let unless you absolutely need to reassign these variables, which you don't in this case.

Your solution seems to work, only 2 things I can think of to improve (besides not defining functions then calling them once as mentioned above):

1. You are calling extractValue() on the SAME set of parameters for every member of arrayTotal, that's redundant.
2. You can replace that .every() call with .includes().

A revised version would look like this:

const substractObjectsFromArray = (arrayTotal, arrayToSubstract, propertyOfReference) => {
  const idsToSubtract = arrayToSubtract.map(element => element[propertyOfReference]);
  return arrayTotal.filter(element => idsToSubtract.includes(element[propertyOfReference]);
}

[AxelleDRouge]

Thanks you are right, it's a good way to improve it.