Javascript / AngularJS: How to compare Object element equality in Array?

Question

I'm creating a bunch of checkboxes for each unique color. However, I'm running into a bug where I have colors that are repeating.

I generate this array of colors using JSON. I loop through all my products, and if the color does not exist in the $scope.colors variable, then push the color object in.

However, it looks like my comparison of identical color objects is failing. They are identical in value, like el1 = {name: 'Red, id: 1} and el2 = {name: 'Red, id: 1}, but it seems like using Array.indexOf(color) always returns -1.

In my angular controller I have this:

$scope.colors = []; // empty array

$scope.setFilterChoices = function(data) {
  for (var i = 0; i < data.length; i++) {
    var product = data[i];



    for (var j = 0; j < product.products_colors.length; j++) {
      var product_color =  product.products_colors[j];

      if ($scope.colors.indexOf(product_color.color) == -1) { // always pushes the color even if the color is the same
        $scope.colors.push(product_color.color);
      }
    }
  }
}

Is there another way to see if an object exists in an array?

agconti · Accepted Answer · 2014-07-30 15:37:10Z

2

You can use angular.equals(obj1, obj2) to do a deep comparison of objects.

Try something like:

// do your data munging:
$scope.colors = [];
for (var i = 0,
         dataLength = data.length; i < dataLength; i++) {
    var product = data[i];

    for (var j = 0,
             colorsLength = product.products_colors.length; j < colorsLength; j++) {
      var product_color =  product.products_colors[j];

      // loop through your color array and check objects. 
      for(var k = 0,
          scopeColorsLength = $scope.colors.length; k < scopeColorsLength; k++){
          if (angular.equals(product_color.color, $scope.colors[k])) {
            $scope.colors.push(product_color.color);
          }
       }
    }
}

edited Jul 30, 2014 at 15:37

answered Jul 30, 2014 at 15:31

agconti

18.2k17 gold badges85 silver badges119 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

reaxis · Accepted Answer · 2014-07-30 15:44:48Z

0

You can't just compare objects like that, you need to compare a specific property of the object:

$scope.colors = []; // empty array

$scope.setFilterChoices = function(data) {
  for (var i = 0; i < data.length; i++) {
    var product = data[i];

    for (var j = 0; j < product.products_colors.length; j++) {
      var product_color = product.products_colors[j];

      var contains = false;

      for (var k = 0; k < $scope.colors.length; k++) {
          if (angular.equals($scope.colors[k], product_color.color)) {
            contains = true;
            break;
          }
        }
      }

      if (!contains) {
        $scope.colors.push(product_color.color);
      }
    }
  }
}

edited Jul 30, 2014 at 15:44

answered Jul 30, 2014 at 15:22

reaxis

1,55113 silver badges11 bronze badges

2 Comments

agconti Over a year ago

You can do a deep comparison of objects in angular.

agconti Over a year ago

wait, you legitimately just pulled angular.equals from my answer?

Collectives™ on Stack Overflow

Javascript / AngularJS: How to compare Object element equality in Array?

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related