How to Get Unique Array Of Objects using Lodash
Jasser Mark Arioste
Hello! In this tutorial, you'll learn how to get unique or distinct values from an array of objects or array of strings.
Introduction #
Sometimes, we need to get the unique values from an array of objects. There are three methods that lodash provides to filter all the unique values namely _.uniq, _.uniqBy, _.uniqWith. In this tutorial, we'll learn how to use all three of these methods for different scenarios.
Getting all the unique values in an array of strings. #
Since we are dealing with a simple/primitive value, we can use _.uniq(). For example, if we want to get all the unique names in an array, we can just do this:
import uniq from "lodash/uniq"; const names = ["Kristy", "Cady", "Kristy", "Nia", "Nia", "Hailie"]; const uniqueNames = uniq(names); console.log(uniqueNames); // => [ 'Kristy', 'Cady', 'Nia', 'Hailie' ]12345
Getting all the unique values by property #
The uniq() method is all we need for an array of primitive types. However, if we want to get all the unique values in an array of objects by property, the uniq method fails.
Suppose, we want to get all the objects with unique first_names and.
import uniq from "lodash/uniq"; const names = [ { id: 1, first_name: "Thekla" }, { id: 2, first_name: "Ugo" }, { id: 3, first_name: "Ugo" } ]; const uniqueNames = uniq(names); console.log(uniqueNames); //output //[ // { id: 1, first_name: 'Thekla' }, // { id: 2, first_name: 'Ugo' }, // { id: 3, first_name: 'Ugo' } //]12345678910111213141516
In the example above, the uniq() method fails to remove the second instance of 'Ugo'. What you need to do is to use the _.uniqBy() method. For example
import uniqBy from "lodash/uniqBy"; const objects = [ { id: 1,first_name: "Thekla" }, { id: 2, first_name: "Ugo" }, { id: 3, first_name: "Ugo" }, ]; // pass a iteratee/predicate function that returns the first_name property const uniqueNames = uniqBy(objects, (obj) => obj.first_name); console.log(uniqueNames); // output // => [ { id: 1, first_name: 'Thekla' }, { id: 2, first_name: 'Ugo' } ]12345678910111213
Removing all the duplicate objects in an array #
Suppose you don't want to get all the unique values by property but remove all the duplicate objects in the array. For example, suppose you have this array:
const objects = [ { id: 1, first_name: "Thekla" }, { id: 2, first_name: "Ugo" }, { id: 2, first_name: "Ugo" }, ];12345
There the 2nd and 3rd entries are duplicates, completely the same objects. For this scenario, we can use _.uniqWith. The uniqWith method accepts a comparator function for the 2nd parameter so that you can specify how to compare two objects if they are equal or not.
import { isEqual, uniqWith } from "lodash"; const objects = [ { id: 1, first_name: "Thekla" }, { id: 2, first_name: "Ugo" }, { id: 2, first_name: "Ugo" }, ]; // we pass a comparator function that compares objects a & b const uniqueNames = uniqWith(objects, (a, b) => { // we use _.isEqual to compare if a & b have exactly the same values for all the properties return isEqual(a, b) }); console.log(uniqueNames); // output // => [ { id: 1, first_name: 'Thekla' }, { id: 2, first_name: 'Ugo' } ]12345678910111213141516
We have complete control over how we want to compare two objects. If you don't want to use the isEqual method, you can use the Object.toString() method as another way to compare two objects. For example:
const objects = [ { id: 1, first_name: "Thekla" }, { id: 2, first_name: "Ugo" }, { id: 2, first_name: "Ugo" }, ]; // pass a iteratee function that returns the first_name property const uniqueNames = uniqWith(objects, (a, b) => { return a.toString() === b.toString(); }); console.log(uniqueNames); // output // => [ { id: 1, first_name: 'Thekla' }, { id: 2, first_name: 'Ugo' } ]1234567891011121314
Conclusion #
You learned how to get all the unique values in an array for different situations. Lodash provides us with very handy utility functions for different scenarios. I think using these three methods to filter unique values cover almost 100% of situations.
If you like this tutorial, please leave a like or share this article. For future tutorials like this, please subscribe to our newsletter or follow me on Twitter.
Resources #
If you need more information on these methods, please check the lodash documentation
Credits: Image by Roman Grac from Pixabay
