How to find equal objects in Javascript or Angularjs?

Question

I am facing a problem about object comparison.

I have two objects list in javascript. How should i filter out the data if object properties is exactly same, then copy to new scope object. Any way to archive this if using AngularJs, Javascript or Underscorejs ? I already put into jsfiddle

jsFiddle

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
  $scope.obj1 = [];
  $scope.obj2 = [];
  $scope.obj1.push({
    buCode: "1000",
    deptCode: "1201",
    brandCode: null,
    prodType: 'C',
    cardType: "22",
    style: null,
    discPer: 10
  },{
    buCode: "1000",
    deptCode: "1201",
    brandCode: null,
    prodType: 'C',
    cardType: "24",
    style: null,
    discPer: 20
  },{
    buCode: "1000",
    deptCode: "1201",
    brandCode: null,
    prodType: 'C',
    cardType: "80",
    style: null,
    discPer: 15
  });

  $scope.obj2.push({
    buCode: "1000",
    deptCode: "1201",
    brandCode: null,
    prodType: 'C',
    cardType: "81",
    style: null,
    discPer: 10
  },{
    buCode: "1000",
    deptCode: "1201",
    brandCode: null,
    prodType: 'C',
    cardType: "24",
    style: null,
    discPer: 20
  },{
    buCode: "1000",
    deptCode: "1201",
    brandCode: null,
    prodType: 'C',
    cardType: "80",
    style: null,
    discPer: 15
  },{
    buCode: "1000",
    deptCode: "1201",
    brandCode: null,
    prodType: 'C',
    cardType: "81",
    style: null,
    discPer: 8
  },{
    buCode: "1000",
    deptCode: "1201",
    brandCode: null,
    prodType: 'C',
    cardType: "83",
    style: null,
    discPer: 25
  },{
    buCode: "1000",
    deptCode: "1201",
    brandCode: null,
    prodType: 'C',
    cardType: "84",
    style: null,
    discPer: 30
  });

  console.log($scope.obj1);
  console.log($scope.obj2);
}

I think use the underscoreJs is the best way to handle such as simple code syntax. First i use some method of underscorejs such as _.find, then handle the logic.

angular.forEach(obj1, function(v, k) {
    var isFind = _.find(obj2, function(o) {
        // some logic.
    })
})

Possible duplicate of [How to do a deep comparison between 2 objects with lodash?](http://stackoverflow.com/questions/31683075/how-to-do-a-deep-comparison-between-2-objects-with-lodash) — Rajesh, Mar 23 '17 at 11:38
Or of http://stackoverflow.com/questions/201183/how-to-determine-equality-for-two-javascript-objects — Rajesh, Mar 23 '17 at 11:39

score 1 · Answer 1 · answered Mar 23 '17 at 11:48

create a filter to check the objects and return it using javascript filter and find functions

 var arr = $scope.obj1.filter(o=> $scope.obj2.find(f=> JSON.stringify(o) === JSON.stringify(f) ));
 console.log(arr)

angular.module("app",[])
.controller("ctrl",function($scope){

$scope.obj1 = [];
  $scope.obj2 = [];
  $scope.obj1.push({
    buCode: "1000",
    deptCode: "1201",
    brandCode: null,
    prodType: 'C',
    cardType: "22",
    style: null,
    discPer: 10
  },{
    buCode: "1000",
    deptCode: "1201",
    brandCode: null,
    prodType: 'C',
    cardType: "24",
    style: null,
    discPer: 20
  },{
    buCode: "1000",
    deptCode: "1201",
    brandCode: null,
    prodType: 'C',
    cardType: "80",
    style: null,
    discPer: 15
  });

  $scope.obj2.push({
    buCode: "1000",
    deptCode: "1201",
    brandCode: null,
    prodType: 'C',
    cardType: "81",
    style: null,
    discPer: 10
  },{
    buCode: "1000",
    deptCode: "1201",
    brandCode: null,
    prodType: 'C',
    cardType: "24",
    style: null,
    discPer: 20
  },{
    buCode: "1000",
    deptCode: "1201",
    brandCode: null,
    prodType: 'C',
    cardType: "80",
    style: null,
    discPer: 15
  },{
    buCode: "1000",
    deptCode: "1201",
    brandCode: null,
    prodType: 'C',
    cardType: "81",
    style: null,
    discPer: 8
  },{
    buCode: "1000",
    deptCode: "1201",
    brandCode: null,
    prodType: 'C',
    cardType: "83",
    style: null,
    discPer: 25
  },{
    buCode: "1000",
    deptCode: "1201",
    brandCode: null,
    prodType: 'C',
    cardType: "84",
    style: null,
    discPer: 30
  });
  
  var arr = $scope.obj1.filter(o=> $scope.obj2.find(f=> JSON.stringify(o) === JSON.stringify(f) ));
  console.log(arr)
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
 
</div>

Can you guarantee that object properties will be in the same order? If not, comparing the result of *JSON.stringify* is not guaranteed to work. — RobG, Mar 23 '17 at 12:16

score 1 · Answer 2 · answered Mar 23 '17 at 12:44

On solution is to compare every object in the first array with every object in the second array, then build a new array where there is no equivalent object in the second array.

"Equivalent" is judged as having the same number of properties and that the value of each key:value pair of one object is === equal to a key:value of the other object.

Note that this doesn't copy the objects, it's just storing references to the same objects in the first array. If you want to copy them, don't use filter, use reduce and Object.assign to create new objects for the result array.

With this method, the order that properties are in doesn't matter. That's important as you can't guarantee that they will be in any particular order, even if they appear to be in the same order from an object literal or other construct. I've mixed up the key:value pairs in some of the objects to show that.

var arr1 = [{
  buCode: "1000",
  deptCode: "1201",
  brandCode: null,
  prodType: 'C',
  cardType: "22",
  style: null,
  discPer: 10
}, {
  buCode: "1000",
  cardType: "24",
  style: null,
  deptCode: "1201",
  brandCode: null,
  prodType: 'C',
  discPer: 20
}, {
  buCode: "1000",
  deptCode: "1201",
  brandCode: null,
  prodType: 'C',
  cardType: "80",
  style: null,
  discPer: 15
}];

var arr2 = [{
  buCode: "1000",
  deptCode: "1201",
  brandCode: null,
  prodType: 'C',
  cardType: "81",
  style: null,
  discPer: 10
}, {
  buCode: "1000",
  deptCode: "1201",
  brandCode: null,
  prodType: 'C',
  cardType: "24",
  style: null,
  discPer: 20
}, {
  buCode: "1000",
  deptCode: "1201",
  brandCode: null,
  prodType: 'C',
  cardType: "80",
  style: null,
  discPer: 15
}, {
  buCode: "1000",
  deptCode: "1201",
  brandCode: null,
  prodType: 'C',
  cardType: "81",
  style: null,
  discPer: 8
}, {
  buCode: "1000",
  deptCode: "1201",
  brandCode: null,
  prodType: 'C',
  cardType: "83",
  style: null,
  discPer: 25
}, {
  prodType: 'C',
  cardType: "84",
  style: null,
  discPer: 30,
  buCode: "1000",
  deptCode: "1201",
  brandCode: null
}];

var result = arr1.filter(function(obj) {
  var keys = Object.keys(obj);
  return !arr2.every(function(obj2) {
    var keys2 = Object.keys(obj2);
    return !(keys.length == keys2.length &&
            keys2.every(function(key) {
              return obj2[key] === obj[key];
            }));
  });
});

console.log(result)

How to find equal objects in Javascript or Angularjs?

2 Answers2