How to Get Distinct Values From an Array of Objects in JavaScript?

Sometimes we may want to get distinct values from an array of objects in our JavaScript code.

In this article, we’ll look at how to get distinct values from an array of objects in JavaScript.

Extracting Values with Array Methods

One way to get distinct values from an array of objects in JavaScript is to use native array methods.

For instance, we can write:

const array = [{
    "name": "jane",
    "age": 17
  },
  {
    "name": "joe",
    "age": 17
  },
  {
    "name": "bob",
    "age": 35
  }
];
const uniques = array.map(item => item.age)
  .filter((value, index, self) => self.indexOf(value) === index)
console.log(uniques)

to call the map and filter to return unique values of the age property from all the items in the array.

We call map to return an array with all the age values.

Then we use filter to return an array with distinct values of the age value array returned from map .

The callback we pass into filter has the value , index and self parameters.

value has the value being iterated through.

index has the index of the value .

And self is the array itself.

We can check if it’s the first instance of a given value with self.indexOf(value) === index .

indexOf returns the index of the first instance of value in the array.

So we can use that return an array that only has the first instance of a given element.

Therefore uniques is [17, 35] .

We can replace the filter call by putting the age value array in a set and then spreading that back into an array:

const array = [{
    "name": "jane",
    "age": 17
  },
  {
    "name": "joe",
    "age": 17
  },
  {
    "name": "bob",
    "age": 35
  }
];
const uniques = [...new Set(array.map(item => item.age))]
console.log(uniques)

And uniques has the same value as the previous example.

The spreading can be replaced with the Array.from method:

const array = [{
    "name": "jane",
    "age": 17
  },
  {
    "name": "joe",
    "age": 17
  },
  {
    "name": "bob",
    "age": 35
  }
];
const uniques = Array.from(new Set(array.map(item => item.age)))
console.log(uniques)

since Array.from works with any iterable objects, including sets, to convert them into an array.

Lodash

Lodash has the uniq method to return unique values from an array of objects.

So we can use it by writing;

const array = [{
    "name": "jane",
    "age": 17
  },
  {
    "name": "joe",
    "age": 17
  },
  {
    "name": "bob",
    "age": 35
  }
];
const uniques = _.uniq(_.map(array, 'age'));
console.log(uniques)

We call map to return an array of age values from array .

And then we call uniq on the returned array to get the unique values from that returned array.

So we get the same result for uniques as the other examples.

Conclusion

We can use native JavaScript array methods or Lodash to extract distinct values from a property from an array of objects.