CODEWITHSUNDEEP
javascriptarrays
bigpotato
bigpotato

Reputation: 27507

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

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?

Upvotes: 0

Views: 1438

Answers (2)

reaxis
reaxis

Reputation: 1431

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);
      }
    }
  }
}

Upvotes: 0

agconti
agconti

Reputation: 18093

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);
          }
       }
    }
}

Upvotes: 2

Related Questions