Find distinct elements in an array of objects

Question

Find distinct elements in an array of objects

Imagine you have an array filled with different objects:

var itemsArray = [
  {name: "apple", color: "red", weight: "100g"},
  {name: "banana", color: "yellow", weight: "120g"},
  {name: "apple", color: "red", weight: "100g"},
  {name: "banana", color: "yellow", weight: "120g"},
  {name: "orange", color: "orange", weight: "150g"},
  {name: "grape", color: "purple", weight: "80g"},
  {name: "orange", color: "orange", weight: "150g"}
];

We want to filter this array to remove duplicate objects:

var itemsArray = [
  {name: "apple", color: "red", weight: "100g"},
  {name: "banana", color: "yellow", weight: "120g"},
  {name: "orange", color: "orange", weight: "150g"},
  {name: "grape", color: "purple", weight: "80g"}
];

While filtering arrays of plain strings is simple:

itemsArray.filter(function (value, index, self) { 
    return self.indexOf(value) === index;
}

It doesn't work for objects. We need to compare all properties to achieve this. Perhaps a deep comparison method is required?

javascript arrays

Answer 1

Answer №1

If all your objects share the same keys, you have the option to utilize either lodash's or underscore's _.findWhere function:

This function performs a deep comparison between each element in the collection and the source object, returning the first element that has equivalent property values.

var arr = [
  {a: "foo", b: "bar", c: "baz" },
  {a: "foo", b: "bar", c: "qux" },
  {a: "foo", b: "bar", c: "baz" },
  {a: "foo", b: "bar", c: "qux" },
  {a: "bar", b: "foo", c: "qux" },
  {a: "bar", b: "qux", c: "foo" },
  {a: "bar", b: "foo", c: "qux" }
];

function uniqueObjects(arr) {
  var u = [];
  arr.forEach(function(obj) {
    if (!_.findWhere(u, obj)) {
      u.push(obj);
    }
  });
  return u
}

document.getElementById('result').innerHTML = JSON.stringify(uniqueObjects(arr),null,2);

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/3.7.0/lodash.min.js"></script>
<pre id='result'></pre>

If not, you can perform a deep comparison using _.matches in both directions:

var arr = [
  {a: "foo", b: "bar", c: "baz" },
  {a: "foo", b: "bar", c: "qux" },
  {a: "foo", b: "bar", c: "baz" },
  {a: "foo", b: "bar", c: "qux" },
  {a: "bar", b: "foo", c: "qux" },
  {a: "bar", b: "qux", c: "foo" },
  {a: "bar", b: "foo", c: "qux" },
  // Missing property
  {a: "foo", b: "bar" },
  // Ordering
  {a: "foo", c: "qux" },
  {c: "qux", a: "foo" }
];

function uniqueObjects(arr) {
  var u = [];
  arr.forEach(function(obj) {
    if (!u.filter(deepCompare(obj)).length) {
      u.push(obj);
    }
  });
  return u;
}

function deepCompare(obj) {
  return function(source) {
    return _.matches(obj)(source) && _.matches(source)(obj);
  };
}

document.getElementById('result').innerHTML = JSON.stringify(uniqueObjects(arr),null,2);

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/3.7.0/lodash.min.js"></script>
<pre id='result'></pre>

Answer 2

If all your objects share the same keys, you have the option to utilize either lodash's or underscore's _.findWhere function:

This function performs a deep comparison between each element in the collection and the source object, returning the first element that has equivalent property values.

var arr = [
  {a: "foo", b: "bar", c: "baz" },
  {a: "foo", b: "bar", c: "qux" },
  {a: "foo", b: "bar", c: "baz" },
  {a: "foo", b: "bar", c: "qux" },
  {a: "bar", b: "foo", c: "qux" },
  {a: "bar", b: "qux", c: "foo" },
  {a: "bar", b: "foo", c: "qux" }
];

function uniqueObjects(arr) {
  var u = [];
  arr.forEach(function(obj) {
    if (!_.findWhere(u, obj)) {
      u.push(obj);
    }
  });
  return u
}

document.getElementById('result').innerHTML = JSON.stringify(uniqueObjects(arr),null,2);

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/3.7.0/lodash.min.js"></script>
<pre id='result'></pre>

If not, you can perform a deep comparison using _.matches in both directions:

var arr = [
  {a: "foo", b: "bar", c: "baz" },
  {a: "foo", b: "bar", c: "qux" },
  {a: "foo", b: "bar", c: "baz" },
  {a: "foo", b: "bar", c: "qux" },
  {a: "bar", b: "foo", c: "qux" },
  {a: "bar", b: "qux", c: "foo" },
  {a: "bar", b: "foo", c: "qux" },
  // Missing property
  {a: "foo", b: "bar" },
  // Ordering
  {a: "foo", c: "qux" },
  {c: "qux", a: "foo" }
];

function uniqueObjects(arr) {
  var u = [];
  arr.forEach(function(obj) {
    if (!u.filter(deepCompare(obj)).length) {
      u.push(obj);
    }
  });
  return u;
}

function deepCompare(obj) {
  return function(source) {
    return _.matches(obj)(source) && _.matches(source)(obj);
  };
}

document.getElementById('result').innerHTML = JSON.stringify(uniqueObjects(arr),null,2);

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/3.7.0/lodash.min.js"></script>
<pre id='result'></pre>

Answer 3

Answer №2

My comment outlines the approach I've taken.

var array = [
  {c: "baz", a: "foo", b: "bar" },
  {c: "qux", a: "foo", b: "bar" },
  {c: "baz", b: "bar", a: "foo" },
  {c: "qux", b: "bar", a: "foo" },
  {a: "bar", c: "qux", b: "foo" },
  {a: "bar", c: "foo", b: "qux" },
  {a: "bar", b: "foo", c: "qux" }
];

var updatedArray = array.map(function (val) {
    var res = [];
    var keys = Object.keys(val).sort();

    for (var i = 0; i < keys.length; i++) {
        res.push(val[keys[i]]);
    }
    return res.join('');
});

for (var i = (updatedArray.length - 1); i >= 0; i--) {
    if (updatedArray.indexOf(updatedArray[i]) !== i) {
        array.splice(i, 1);
    }
}


alert(JSON.stringify(array));

Answer 4

My comment outlines the approach I've taken.

var array = [
  {c: "baz", a: "foo", b: "bar" },
  {c: "qux", a: "foo", b: "bar" },
  {c: "baz", b: "bar", a: "foo" },
  {c: "qux", b: "bar", a: "foo" },
  {a: "bar", c: "qux", b: "foo" },
  {a: "bar", c: "foo", b: "qux" },
  {a: "bar", b: "foo", c: "qux" }
];

var updatedArray = array.map(function (val) {
    var res = [];
    var keys = Object.keys(val).sort();

    for (var i = 0; i < keys.length; i++) {
        res.push(val[keys[i]]);
    }
    return res.join('');
});

for (var i = (updatedArray.length - 1); i >= 0; i--) {
    if (updatedArray.indexOf(updatedArray[i]) !== i) {
        array.splice(i, 1);
    }
}


alert(JSON.stringify(array));

Answer 5

Answer №3

Utilize lodash library for removing duplicates in arrays! Check out the documentation here

By using SameValueZero for equality comparisons, lodash creates a version of an array without any duplicate elements, keeping only the first occurrence of each. If the array is sorted, providing true for isSorted can result in a faster search algorithm. You can also pass an iteratee function which will be invoked for each element in the array to determine uniqueness. The iteratee function is bound to thisArg and takes three arguments: (value, index, array).

To include lodash in your HTML, use the following script tag:

<script src="bower_components/lodash/lodash.js"></script>

Next, in your controller, you can use the following code snippet:

var filteredArray = _.uniq(arr, function(item, key, a) { 
    return item.a;
});

For a live example, check out this jsFiddle link: http://jsfiddle.net/8xp3o7b3/3/

Answer 6

Utilize lodash library for removing duplicates in arrays! Check out the documentation here

By using SameValueZero for equality comparisons, lodash creates a version of an array without any duplicate elements, keeping only the first occurrence of each. If the array is sorted, providing true for isSorted can result in a faster search algorithm. You can also pass an iteratee function which will be invoked for each element in the array to determine uniqueness. The iteratee function is bound to thisArg and takes three arguments: (value, index, array).

To include lodash in your HTML, use the following script tag:

<script src="bower_components/lodash/lodash.js"></script>

Next, in your controller, you can use the following code snippet:

var filteredArray = _.uniq(arr, function(item, key, a) { 
    return item.a;
});

For a live example, check out this jsFiddle link: http://jsfiddle.net/8xp3o7b3/3/

Find distinct elements in an array of objects

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to retrieve the value from a textfield in one module and use it in a

Django and its compatibility with modal windows

Unable to switch between navigation items and icons

Transforming dates from JSON and showcasing them on a DataTable

Retrieve all records from the query and store them in an array, then output a singular value

During operational hours, an Ajax request may cause interruptions to the website's functionality

Upon triggering a GET request to the URL "http://localhost:3000/search", a "404 (Not Found)" error response was received. Interestingly

AngularJS redirection to a different state by utilizing a URL

Error: Attempting to access 'scrollTop' property of null object in Material UI library

Refresh the table every couple of seconds

Can a function be called when using ng-options with AngularJS select?

Creating a Dual Y-Axis Chart with Two Sets of Data in chart.js

managing the reloading of pages and navigating back and forth in the browser

How to iterate over the request body in Node.js using Express?

The curly braces in AngularJS are not resolving as expected, however, the ng-bind directive is functioning properly

Exploring the seamless integration of Material UI slider with chart js

extract elements from dataset

Access another key within an object

The proper formatting of JSON strings in AWS using GraphQL

What is the best way to access and display the innerText of elements that have been removed using console