JavaScript get elements from an object array that are not in another

Question

I\'m new in JavaScript programming and I have two object arrays that have the following structure:

myFirstObjArray = [{foo: 1, bar: 1}, {foo: 3, bar: 3}, {fo         


        

Answer 1

Here is a small solution with just filter and a map with the foo attribute.

const myFirstObjArray = [{foo: 1, bar: 1}, {foo: 3, bar: 3}, {foo: 4, bar: 5}];
const mySecondObjArray = [{foo: 2}, {foo: 4}, {foo: 5}];

const exclude = (arr1, arr2) => arr1.filter(o1 => arr2.map(o2 => o2.foo).indexOf(o1.foo) === -1);

console.log(exclude(myFirstObjArray, mySecondObjArray));
console.log(exclude(mySecondObjArray, myFirstObjArray));

Answer 2

You can create a reusable function to prevent code duplication. Just switch over to the function parameter. Also note that the inner loop is simple for loop so that we can use break and avoid unnecessary checks.

var firstArray = [];
var secondArray = [];
var myFirstObjArray = [{foo: 1, bar: 1}, {foo: 3, bar: 3}, {foo: 4, bar: 5}];
var mySecondObjArray = [{foo: 2}, {foo: 4}, {foo: 5}];

function difference(myFirstObjArray, mySecondObjArray){
  var firstArray = [];
  myFirstObjArray.forEach((obj)=>{
   var match = false;
   for(var i=0; i<mySecondObjArray.length; i++){
     var secondObj = mySecondObjArray[i];
     if(obj.foo === secondObj.foo){
       match = true;
       break;
     }
   }
   if(!match){
     firstArray.push({'foo': obj.foo});
   }
  });
  return firstArray;
}


console.log(difference(myFirstObjArray, mySecondObjArray));

console.log(difference(mySecondObjArray, myFirstObjArray));

Answer 3

You can simply filter one array's elements by setting the condition based on other array's elements like.

var myFirstObjArray = [{foo: 1, bar: 1}, {foo: 3, bar: 3}, {foo: 4, bar: 5}],
    mySecondObjArray = [{foo: 2}, {foo: 4}, {foo: 5}],
    
    firstArray  = myFirstObjArray.filter(o=> !mySecondObjArray.some(i=> i.foo === o.foo));
    
    secondArray  = mySecondObjArray.filter(o=> !myFirstObjArray.some(i=> i.foo === o.foo));
    
    console.log(firstArray.map(o=> {return {'foo' :  o.foo}}))
    console.log(secondArray.map(o=> {return {'foo' :  o.foo}}))

Ps:

The some() method tests whether at least one element in the array passes the test implemented by the provided function. And I've added a function which just checks if foo property exists in the other array with the same value to be able to filter from the first array.

At the end you can use .map to filter out the desired key value pairs

Hope that makes sense

Read more about .some and filter

Answer 4

ES5 without using fat arrow,

var myFirstObjArray = [{foo: 1, bar: 1}, {foo: 3, bar: 3}, {foo: 4, bar: 5}],
    mySecondObjArray = [{foo: 2}, {foo: 4}, {foo: 5}],
    
    firstArray  = myFirstObjArray.filter(function(o) { return !mySecondObjArray.some(function(i) { return i.foo === o.foo})});
     
    secondArray  = mySecondObjArray.filter(function(o) { return !myFirstObjArray.some(function(i) { return i.foo === o.foo})});
    
    console.log(firstArray)
    console.log(secondArray)

Answer 5

You could filter by look up.

const unique = a => o => !a.some(({ foo }) => o.foo === foo);

var first = [{foo: 1, bar: 1}, {foo: 3, bar: 3}, {foo: 4, bar: 5}],
    second = [{foo: 2}, {foo: 4}, {foo: 5}],
    uniqueFirst = first.filter(unique(second)),
    uniqueSecond = second.filter(unique(first));
    
console.log(uniqueFirst);
console.log(uniqueSecond);

.as-console-wrapper { max-height: 100% !important; top: 0; }