How to get distinct values from an array of objects in JavaScript

Question

Assuming I have the following   var array                    name   Joe    age  17              name   Bob    age  17              name   Carl    age   35          What is the best way to be able to get an array of all of the distinct ages such that I get an result array of    17  35    Is there some way I could alternatively structure the data or better method such that I would not have to iterate through each array checking the value of  age  and check against another array for its existence  and add it if not   If there was some way I could just pull out the distinct ages without iterating     Current inefficent way I would like to improve    If it means that instead of  array  being an array of objects  but a  map  of objects with some unique key  i e   1 2 3   that would be okay too  Im just looking for the most performance efficient way   The following is how I currently do it  but for me  iteration appears to just be crummy for efficiency even though it does work     var distinct      for  var i   0  i  lt  array length  i       if  array i  age not in distinct        distinct push array i  age

User · Answer

Let assume we have data something like this arr=[{id:1,age:17},{id:2,age:19} ...], then we can find unique objects like this -

function getUniqueObjects(ObjectArray) {
    let uniqueIds = new Set();
    const list = [...new Set(ObjectArray.filter(obj => {
        if (!uniqueIds.has(obj.id)) {
            uniqueIds.add(obj.id);
            return obj;
        }
    }))];

    return list;
}

Check here Codepen Link

User · Answer

x000D   x000D  const array     x000D       name    Joe    age   17     x000D       name   Bob    age  17    x000D       name   Carl    age   35   x000D    x000D   x000D  const allAges   array map a   gt  a age   x000D   x000D  const uniqueSet   new Set allAges  x000D  const uniqueArray       uniqueSet  x000D   x000D  console log uniqueArray  x000D   x000D   x000D

User · Answer

If you would like to filter out duplicate values from an array on a known unique object property  you could use the following snippet   let arr          name    Joe    age   17         name    Bob    age   17         name    Carl    age   35         name    Carl    age   35       let uniqueValues       arr reduce  map  val    gt        if   map has val name             map set val name  val             return map     new Map    values

User · Answer

var unique   array      map p   gt  p age       filter  age  index  arr    gt  arr indexOf age     index       sort       sorting is optional     or in ES6  var unique       new Set array map p   gt  p age         or with lodash  var unique     uniq   map array   age       ES6 example  const data         name   Joe   age  17        name   Bob   age  17        name   Carl   age  35      const arr   data map p   gt  p age       17  17  35  const s   new Set arr       17  35  a set removes duplications  but it s still a set const unique       s       17  35  Use the spread operator to transform a set into an Array    or use Array from to transform a set into an array const unique2   Array from s       17  35

User · Answer

Answering this old question is pretty pointless  but there is a simple answer that speaks to the nature of Javascript  Objects in Javascript are inherently hash tables  We can use this to get a hash of unique keys   var o       array map function v   o v age    1        Then we can reduce the hash to an array of unique values   var a2       for  k in o   a2 push k       That is all you need  The array a2 contains just the unique ages

User · Answer

You may be interested in unique set of objects based on one of the keys  let array            quot name quot   quot Joe quot    quot age quot  17          quot name quot   quot Bob quot    quot age quot  17          quot name quot   quot Carl quot    quot age quot   35    let unq objs       new Map array map o   gt  o  quot age quot    o    values     console log unq objs    result   name   quot Bob quot   age  17    name   quot Carl quot   age  35

User · Answer

Simple one-liner with great performance  6  faster than the ES6 solutions in my tests   var ages   array map function o  return o age   filter function v i a        return a indexOf v    i

User · Answer

unique obj  prop        let result           let seen   new Set         Object keys obj           forEach  key    gt                let value   obj key                let test    prop                   value                   value prop                 seen has test                   amp  amp  seen add test                   amp  amp  result push value                    return result

User · Answer

Here s a versatile solution that uses reduce  allows for mapping  and maintains insertion order   items  An array  mapper  A unary function that maps the item to the criteria  or empty to map the item itself   function distinct items  mapper        if   mapper  mapper    item   gt item      return items map mapper  reduce  acc  item    gt            if  acc indexOf item      -1  acc push item           return acc                  Usage  const distinctLastNames   distinct items   item   gt item lastName   const distinctItems   distinct items     You can add this to your Array prototype and leave out the items parameter if that s your style     const distinctLastNames   items distinct   item   gt item lastName      const distinctItems   items distinct       You can also use a Set instead of an Array to speed up the matching   function distinct items  mapper        if   mapper  mapper    item   gt item      return items map mapper  reduce  acc  item    gt            acc add item           return acc         new Set

User · Answer

underscore js   uniq   pluck array  age

User · Answer

If your array is object array  you can use this code  getUniqueArray    array  MyData      gt        return array filter  elem  index    gt  array findIndex obj   gt  obj value    elem value      index      Where MyData is like as below  export interface MyData      value  string      name  string    Note  You can t use Set because when objects are compared they are compared by reference and not by value  Therefore you need unique key for compare objects  in my example unique key is value field  For more details  you can visit this link   Filter an array for unique values in Javascript

User · Answer

using d3 js v3     ages   d3 set      array map function  d    return d age         values

User · Answer

x000D   x000D  const x         id   93   name   CVAM NGP KW        id   94   name   CVAM NGP PB        id   93   name   CVAM NGP KW        id   94   name   CVAM NGP PB     reduce     accumulator  current    gt        if  accumulator some x   gt  x id     current id           accumulator push current            return accumulator             console log x      output         id   93   name   CVAM NGP KW         id   94   name   CVAM NGP PB          x000D   x000D   x000D

User · Answer

Using a set and filter  This preserves order    x000D   x000D  let unique    items    gt    x000D      const s   new Set    x000D      return items filter  item    gt    x000D        if  s has item     x000D          return false  x000D          x000D        s add item   x000D        return true  x000D          x000D      x000D     x000D    console log  x000D    unique  x000D          x000D           one    two    two    three    three    three  x000D          x000D        x000D       x000D   x000D     x000D  output  x000D    x000D     one   x000D     two   x000D     three  x000D    x000D     x000D   x000D   x000D

User · Answer

This is how you would solve this using new Set via ES6 for Typescript as of August 25th  2017  Array from new Set yourArray map  item  any    gt  item id

User · Answer

function get unique values from array object array property       var unique           var distinct           for  var i in array           if  typeof unique array i  property        undefined              distinct push array i                    unique array i  property     0            return distinct

User · Answer

There is linq js - LINQ for JavaScript package  npm install linq   that should be familiar for  Net developers   Among others methods shown in samples  there are distinct overloads   An example to distinct objects by property value from an array of objects is   Enumerable from array  distinct      id     toArray      From https   medium com  xmedeko i-recommend-you-to-try-https-github-com-mihaifm-linq-20a4e3c090e9

User · Answer

Using Lodash  var array            name    Joe    age   17           name    Bob    age   17           name    Carl    age   35         chain array  map  age   unique   value      Returns  17 35

User · Answer

Using ES6 features  you could do something like   const uniqueAges       new Set  array map obj   gt  obj age

User · Answer

In case you need unique of whole object  const     require  lodash     var objects          x   1   y   2         y   1   x   2         x   2   y   1         x   1   y   2         uniqWith objects    isEqual      Object  x  1  y  2   Object  x  2  y  1

User · Answer

using ES6  let array          name    Joe    age   17         name    Bob    age   17         name    Carl    age   35      array map item   gt  item age     filter  value  index  self    gt  self indexOf value      index    gt   17  35

User · Answer

You could use a dictionary approach like this one  Basically you assign the value you want to be distinct as a key in the  dictionary   here we use an array as an object to avoid dictionary-mode   If the key did not exist then you add that value as distinct   Here is a working demo    x000D   x000D  var array      name   Joe    age  17     name   Bob    age  17     name   Carl    age   35    x000D  var unique       x000D  var distinct       x000D  for  let i   0  i  lt  array length  i      x000D    if   unique array i  age    x000D      distinct push array i  age   x000D      unique array i  age    1  x000D      x000D    x000D  var d   document getElementById  d    x000D  d innerHTML        distinct  x000D   lt div id  d  gt  lt  div gt  x000D   x000D   x000D    This will be O n  where n is the number of objects in array and m is the number of unique values  There is no faster way than O n  because you must inspect each value at least once   The previous version of this used an object  and for in  These were minor in nature  and have since been minorly updated above  However  the reason for a seeming advance in performance between the two versions in the original jsperf was due to the data sample size being so small  Thus  the main comparison in the previous version was looking at the difference between the internal map and filter use versus the dictionary mode lookups   I have updated the code above  as noted  however  I have also updated the jsperf to look through 1000 objects instead of 3  3 overlooked many of the performance pitfalls involved  obsolete jsperf    Performance  https   jsperf com filter-vs-dictionary-more-data When I ran this dictionary was 96  faster

User · Answer

Well you can use lodash to write a code which will be less verbose  Approach 1 Nested Approach      let array                            name   Joe    age  17                  name   Bob    age  17                  name   Carl    age   35                let result     uniq   map array item  gt item age     Approach 2  Method Chaining or Cascading method      let array                            name   Joe    age  17                  name   Bob    age  17                  name   Carl    age   35                let result     chain array  map item  gt item age  uniq   value     You can read about lodash s uniq   method from https   lodash com docs 4 17 15 uniq

User · Answer

There are a lot of great answers here  but none of them have addressed the following line      Is there some way I could alternatively structure the data   I would create an object whose keys are the ages  each pointing to an array of names    x000D   x000D  var array       name    Joe    age   17       name    Bob    age   17       name    Carl    age   35     x000D   x000D  var map   array reduce function result  item    x000D    result item age    result item age         x000D    result item age  push item name   x000D    return result  x000D          x000D   x000D  console log Object keys map    x000D  console log map   x000D   x000D   x000D    This way you ve converted the data structure into one that is very easy to retrieve the distinct ages from   Here is a more compact version that also stores the entire object instead of just the name  in case you are dealing with objects with more than 2 properties so they cant be stored as key and value     x000D   x000D  var array       name    Joe    age   17       name    Bob    age   17       name    Carl    age   35     x000D   x000D  var map   array reduce  r  i    gt    r i age    r i age         push i   r        x000D   x000D  console log Object keys map    x000D  console log map   x000D   x000D   x000D

User · Answer

There are many valid answers already  but I wanted to add one that uses only the  reduce   method because it is clean and simple   function uniqueBy arr  prop     return arr reduce  a  d    gt        if   a includes d prop      a push d prop          return a                Use it like this   var array         name    Joe    age   17        name    Bob    age   17        name    Carl    age   35      var ages   uniqueBy array   age    console log ages       17  35

User · Answer

Using new Ecma features are great but not all users have those available yet    Following code will attach a new function named distinct to the Global Array object  If you are trying get distinct values of an array of objects  you can pass the name of the value to get the distinct values of that type    Array prototype distinct   function item     var results       for  var i   0  l   this length  i  lt  l  i        if   item           if  results indexOf this i       -1              results push this i              else           if  results indexOf this i  item       -1              results push this i  item          return results      Check out my post in CodePen for a demo

User · Answer

Here s another way to solve this   var result       for var i in array        result array i  age    null    result   Object keys result     I have no idea how fast this solution is compared to the others  but I like the cleaner look   -      EDIT  Okay  the above seems to be the slowest solution of all here    I ve created a performance test case here  http   jsperf com distinct-values-from-array  Instead of testing for the ages  Integers   I chose to compare the names  Strings     Method 1  TS s solution  is very fast  Interestingly enough  Method 7 outperforms all other solutions  here I just got rid of  indexOf   and used a  manual  implementation of it  avoiding looped function calling   var result       loop1  for  var i   0  i  lt  array length  i          var name   array i  name      for  var i2   0  i2  lt  result length  i2              if  result i2     name                continue loop1                      result push name       The difference in performance using Safari  amp  Firefox is amazing  and it seems like Chrome does the  best job on optimization   I m not exactly sure why the above snippets is so fast compared to the others  maybe someone wiser than me has an answer   -

User · Answer

If you re stuck using ES5  or you can t use new Set or new Map for some reason  and you need an array containing values with a unique key  and not just an array of unique keys   you can use the following  function distinctBy key  array        var keys   array map function  value    return value key           return array filter function  value  index    return keys indexOf value key       index         Or the type-safe equivalent in TypeScript  public distinctBy lt T gt  key  keyof T  array  T          const keys   array map value   gt  value key        return array filter  value  index    gt  keys indexOf value key       index      Usage  var distinctPeople   distinctBy  age   people    All of the other answers either   Return an array of unique keys instead of objects  like returning the list of ages instead of the people who have an unique age   Use ES6  new Set  new Map etc  which might not be available to you  Do not have a configurable key  like having  age hardcoded into the distinct function   Assume the key can be used to index an array  which is not always true and TypeScript wouldn t allow it   This answers does not have any of the four issues above

User · Answer

new Set          name    Joe    age   17           name    Bob    age   17           name    Carl    age   35       map    age      gt  age

User · Answer

I d just map and remove dups   var ages   array map function obj    return obj age      ages   ages filter function v i    return ages indexOf v     i       console log ages       gt   17  35    Edit  Aight  Not the most efficient way in terms of performance  but the simplest most readable IMO  If you really care about micro-optimization or you have huge amounts of data then a regular for loop is going to be more  efficient

User · Answer

The approach for getting a collection of distinct value from a group of keys    You could take the given code from here and add a mapping for only the wanted keys to get an array of unique object values    x000D   x000D  const x000D      listOfTags      id  1  label   Hello   color   red   sorting  0      id  2  label   World   color   green   sorting  1      id  3  label   Hello   color   blue   sorting  4      id  4  label   Sunshine   color   yellow   sorting  5      id  5  label   Hello   color   red   sorting  6     x000D      keys     label    color    x000D      filtered   listOfTags filter  x000D           s   gt  o   gt  x000D               k   gt   s has k   amp  amp  s add k   x000D               keys map k   gt  o k   join       x000D            new Set  x000D        x000D      result   filtered map o   gt  Object fromEntries keys map k   gt   k  o k       x000D   x000D  console log result   x000D   as-console-wrapper   max-height  100   important  top  0    x000D   x000D   x000D

User · Answer

For those who want to return object with all properties unique by key   x000D   x000D  const array   x000D      x000D         name    Joe    age   17    x000D         name    Bob    age   17    x000D         name    Carl    age   35   x000D      x000D   x000D  const key    age   x000D   x000D  const arrayUniqueByKey       new Map array map item   gt  x000D     item key   item    values     x000D   x000D  console log arrayUniqueByKey   x000D   x000D       OUTPUT x000D           x000D             name    Bob    age   17    x000D             name    Carl    age   35   x000D           x000D        x000D   x000D      Note  this will pick the last duplicated item in the list  x000D   x000D   x000D

User · Answer

I know this is an old and relatively well-answered question and the answer I m giving will get the complete-object back  Which I see suggested in a lot of the comments on this post   It may be  tacky  but in terms of readability seems a lot cleaner  although less efficient  than a lot of other solutions   This will return a unique array of the complete objects inside the array   let productIds   data map d   gt        return JSON stringify          id      d sku product productId        name    d sku product name        price      d sku product price currency     d sku product price gross   d sku product price divisor  toFixed 2             productIds        new Set productIds   map d   gt  JSON parse d

User · Answer

I have a small solution let data     id  1    id  2    id  3    id  2    id  3    let result   data filter  value  index  self    gt  self findIndex  m    gt  m id     value id       index

User · Answer

I ve started sticking Underscore in all new projects by default just so I never have to think about these little data-munging problems   var array      name   Joe    age  17     name   Bob    age  17     name   Carl    age   35    console log   chain array  map function item    return item age    uniq   value       Produces  17  35

User · Answer

If you want to have an unique list of objects returned back  here is another alternative  const unique    arr  encoder JSON stringify  decoder JSON parse    gt        new Set arr map item   gt  encoder item     map item   gt  decoder item     Which will turn this  unique    quot name quot    quot john quot      quot name quot    quot sarah quot      quot name quot    quot john quot      into    quot name quot    quot john quot      quot name quot    quot sarah quot     The trick here is that we are first encoding the items into strings using JSON stringify  and then we are converting that to a Set  which makes the list of strings unique  and then we are converting it back to the original objects using JSON parse

User · Answer

If this were PHP I d build an array with the keys and take array keys at the end  but JS has no such luxury  Instead  try this   var flags       output       l   array length  i  for  i 0  i lt l  i          if  flags array i  age   continue      flags array i  age    true      output push array i  age

User · Answer

i think you are looking for groupBy function  using Lodash    personsList      name   Joe    age  17                      name   Bob    age  17                      name   Carl    age   35     uniqAgeList     groupBy  personsList  age     uniqAges   Object keys  uniqAgeList     produces result   17 35   jsFiddle demo http   jsfiddle net 4J2SX 201

User · Answer

I picked up random samples and tested it against the 100 000 items as below  let array    for  var i 1 i lt 100000 i       let j  Math floor Math random     i    1   array push   quot name quot   quot Joe quot  j   quot age quot  j      And here the performance result for each    Vlad Bezden Time               gt  15ms   Travis J Time  25ms            gt  25ms    Niet the Dark Absol Time       gt  30ms   Arun Saini Time                gt  31ms   Mrchief Time                   gt  54ms   Ivan Nosov Time                gt  14374ms  Also  I want to mention  since the items are generated randomly  the second place was iterating between Travis and Niet

User · Answer

The forEach version of  travis-j s answer  helpful on modern browsers and Node JS world    var unique       var distinct       array forEach function  x      if   unique x age         distinct push x age       unique x age    true            34  faster on Chrome v29 0 1547  http   jsperf com filter-versus-dictionary 3  And a generic solution that takes a mapper function  tad slower than direct map  but that s expected    function uniqueBy arr  fn      var unique         var distinct         arr forEach function  x        var key   fn x       if   unique key           distinct push key         unique key    true                return distinct        usage uniqueBy array  function x  return x age        outputs  17  35

User · Answer

using lodash  var array            name    Joe    age   17           name    Bob    age   17           name    Carl    age   35        chain array  pluck  age   unique   value     gt   17  35

User · Answer

If like me you prefer a more  functional  without compromising speed  this example uses fast dictionary lookup wrapped inside reduce closure   var array            name   Joe    age  17          name   Bob    age  17          name   Carl    age   35    var uniqueAges   array reduce  p c i a    gt        if  p 0  c age             p 1  push p 0  c age    c age             if i lt a length-1            return p       else           return p 1                      According to this test my solution is twice as fast as the proposed answer

User · Answer

this function can unique array and object  function oaunic x n 0       if n  0  n    elem       else n    elem   n      var uval           var unic   x filter function elem  index  self           if uval indexOf eval n    lt  0               uval push eval n                return index    self indexOf elem                        return unic      use that like this  tags obj     name  milad    name  maziar    name  maziar    tags arr     milad   maziar   maziar   console log oaunic tags obj  name      for object console log oaunic tags arr     for array

User · Answer

Simple distinct filter using Maps    x000D   x000D  let array                    name   Joe    age  17              name   Bob    age  17              name   Carl    age   35          let data   new Map     for  let obj of array      data set obj age  obj      let out       data values      console log out   x000D   x000D   x000D

User · Answer

If you have Array prototype includes or are willing to polyfill it  this works   var ages       array forEach function x    if   ages includes x age   ages push x age

User · Answer

My below code will show the unique array of ages as well as new array not having duplicate age  var data         name    Joe    age   17        name    Bob    age   17        name    Carl    age   35      var unique       var tempArr       data forEach  value  index    gt        if  unique indexOf value age      -1            unique push value age         else           tempArr push index                 tempArr reverse    tempArr forEach ele   gt        data splice ele  1       console log  Unique Ages   unique   console log  Unique Array   data

User · Answer

If you are using ES6 ES2015 or later you can do it this way  const data         group   A   name   SD          group   B   name   FI          group   A   name   MM         group   B   name   CO      const unique       new Set data map item   gt  item group           A    B    Here is an example on how to do it

User · Answer

I know my code is little length and little time complexity but it s understandable so I tried this way   I m trying to develop prototype based function here and code also change    Here Distinct is my own prototype function    x000D   x000D   lt script gt  x000D    var array      x000D         name    Joe   x000D         age   17 x000D         x000D        x000D         name    Bob   x000D         age   17 x000D         x000D        x000D         name    Carl   x000D         age   35 x000D        x000D      x000D   x000D    Array prototype Distinct        gt    x000D      var output       x000D      for  let i   0  i  lt  array length  i      x000D        let flag   true  x000D        for  let j   0  j  lt  output length  j      x000D          if  array i  age    output j     x000D            flag   false  x000D            break  x000D            x000D          x000D        if  flag  x000D          output push array i  age   x000D        x000D      return output  x000D      x000D      Distinct is my own function x000D    console log array Distinct     x000D   lt  script gt  x000D   x000D   x000D

User · Answer

I wrote my own in TypeScript  for a generic case  like that in Kotlin s Array distinctBy        function distinctBy lt T  U extends string   number gt  array  T    mapFn   el  T    gt  U      const uniqueKeys   new Set array map mapFn      return array filter  el    gt  uniqueKeys has mapFn el         Where U is hashable  of course  For Objects  you might need https   www npmjs com package es6-json-stable-stringify

User · Answer

my two cents on this function   var result       for  var len   array length  i   0  i  lt  len    i      var age   array i  age    if  result indexOf age   gt  -1  continue    result push age       You can see the result here  Method 8  http   jsperf com distinct-values-from-array 3

User · Answer

Just found this and I thought it s useful    map   indexBy records    id    function obj  return obj     Again using underscore  so if you have an object like this  var records      id 1 name  one    id 2 name  two    id 1 name  one      it will give you the unique objects only   What happens here is that indexBy returns a map like this    1   id 1 name  one    2   id 2 name  two       and just because it s a map  all keys are unique   Then I m just mapping this list back to array   In case you need only the distinct values    map   indexBy records    id    function obj key  return key     Keep in mind that the key is returned as a string so  if you need integers instead  you should do    map   indexBy records    id    function obj key  return parseInt key

[javascript] How to get distinct values from an array of objects in JavaScript?

Examples related to javascript

Examples related to arrays

Examples related to unique