Get Unique Values from an Array of Objects

Arrays are used to store different values in the same variable. An array of objects is used to store various objects within an array. While working with objects and array of objects, we often need to get unique values and process them. This article will discuss different ways to get distinct property values in javascript’s array of objects.

Table of Contents:

Get Unique Values from an Array of Objects using Set

Javascript’s Set will let you store distinct values. These values can either be any primitive types or object references.

Javascript’s map will create a new array with values resulting from applying provided function on each element of the calling array.

Example:-

Advertisements

Get unique candidateId values from the below array of objects

[ { candidateId: 5, candidateName: ‘Paul’, eligibility: ‘Yes’ , city : ‘San Diego’}, { candidateId: 6, candidateName: ‘Eva’, eligibility: ‘No’, city : ‘San Diego’}, { candidateId: 7, candidateName: ‘Veronica’, eligibility: ‘Yes’, city : ‘New York’ }, { candidateId: 5, candidateName: ‘Paul’, eligibility: ‘Yes’ , city : ‘San Diego’}, { candidateId: 5, candidateName: ‘Paulioa’, eligibility: ‘Yes’ , city : ‘San Diego’}, { candidateId: 7, candidateName: ‘Veronica’, eligibility: ‘Yes’, city : ‘New York’ }, ]

Code:-

 var myObjectArray = [
    { candidateId: 5, candidateName: 'Paul', eligibility: 'Yes' , city : 'San Diego'},
    { candidateId: 6, candidateName: 'Eva', eligibility: 'No', city : 'San Diego'},
    { candidateId: 7, candidateName: 'Veronica', eligibility: 'Yes', city : 'New York' },
    { candidateId: 5, candidateName: 'Paul', eligibility: 'Yes' , city : 'San Diego'},
    { candidateId: 5, candidateName: 'Paulioa', eligibility: 'Yes' , city : 'San Diego'},
    { candidateId: 7, candidateName: 'Veronica', eligibility: 'Yes', city : 'New York' },
  ];
function getUniquePropertyValues(_array,_property)
  { // Set will store only distinct values
   return [...new Set(_array.map(element => element[_property]))]; 
  }
//usage of the function getUniquePropertyValues
 console.log("Unique Values: "+ getUniquePropertyValues(myObjectArray,"candidateId"));

Output:-

Unique Candidate Id Values: 5,6,7

Explanation:-

  • Here, in the above code, we create a function getUniquePropertyValues to return only distinct candidateId values.
  • This function needs two parameters: the array of objects (myObjectArray) and the property name (candidateId) with desired distinct values. 
  • Firstly create a new array with only candidateId values using map().
  • Then, add unique candidateIds into a Set.
  • Finally, return this unique Set of values.

Get Unique Values from an Array of Objects using Iteration

Example:-

Get unique candidateId values from the below array of objects

[ { candidateId: 5, candidateName: ‘Paul’, eligibility: ‘Yes’ , city : ‘San Diego’}, { candidateId: 6, candidateName: ‘Eva’, eligibility: ‘No’, city : ‘San Diego’}, { candidateId: 7, candidateName: ‘Veronica’, eligibility: ‘Yes’, city : ‘New York’ }, { candidateId: 5, candidateName: ‘Paul’, eligibility: ‘Yes’ , city : ‘San Diego’}, { candidateId: 5, candidateName: ‘Paulioa’, eligibility: ‘Yes’ , city : ‘San Diego’}, { candidateId: 7, candidateName: ‘Veronica’, eligibility: ‘Yes’, city : ‘New York’ }, ]

Code:-

 var myObjectArray = [
    { candidateId: 5, candidateName: 'Paul', eligibility: 'Yes' , city : 'San Diego'},
    { candidateId: 6, candidateName: 'Eva', eligibility: 'No', city : 'San Diego'},
    { candidateId: 7, candidateName: 'Veronica', eligibility: 'Yes', city : 'New York' },
    { candidateId: 5, candidateName: 'Paul', eligibility: 'Yes' , city : 'San Diego'},
    { candidateId: 5, candidateName: 'Paulioa', eligibility: 'Yes' , city : 'San Diego'},
    { candidateId: 7, candidateName: 'Veronica', eligibility: 'Yes', city : 'New York' },
  ];
  function getUniquePropertyValues(_array, _property)
  {
  var unique = [];
  var distinctPropertyValues = [];
  for( let i = 0; i < _array.length; i++ )
    {
      
    if( !unique[_array[i][_property]])
      {
        distinctPropertyValues.push(_array[i][_property]);
        unique[_array[i][_property]] = 1;
      }
    }
    return distinctPropertyValues;
  }
console.log("Unique Candidate Id Values: "+ getUniquePropertyValues(myObjectArray,"candidateId"));

Output:-

Unique Candidate Id Values: 5,6,7

Explanation:-

  • Here, in the above code, we create a function getUniquePropertyValues to return only distinct candidateId values. 
  • This function needs two parameters: the array of objects (myObjectArray) and the property name (candidateId) with desired distinct values.
  • We are iterating the array to its length within the function and pushing the candidateId property values to another array. Then, we compare these candidateId values and separate unique values.
  • Finally, return this unique candidateId values.

Get Unique Values from an Array of Objects using filter()

Javascript’s filter() method returns a new array that has of all the elements that pass the test implemented by the provided function.

Example:-

Get unique candidateId values from the below array of objects

[ { candidateId: 5, candidateName: ‘Paul’, eligibility: ‘Yes’ , city : ‘San Diego’}, { candidateId: 6, candidateName: ‘Eva’, eligibility: ‘No’, city : ‘San Diego’}, { candidateId: 7, candidateName: ‘Veronica’, eligibility: ‘Yes’, city : ‘New York’ }, { candidateId: 5, candidateName: ‘Paul’, eligibility: ‘Yes’ , city : ‘San Diego’}, { candidateId: 5, candidateName: ‘Paulioa’, eligibility: ‘Yes’ , city : ‘San Diego’}, { candidateId: 7, candidateName: ‘Veronica’, eligibility: ‘Yes’, city : ‘New York’ }, ]

Code:-

 var myObjectArray = [
    { candidateId: 5, candidateName: 'Paul', eligibility: 'Yes' , city : 'San Diego'},
    { candidateId: 6, candidateName: 'Eva', eligibility: 'No', city : 'San Diego'},
    { candidateId: 7, candidateName: 'Veronica', eligibility: 'Yes', city : 'New York' },
    { candidateId: 5, candidateName: 'Paul', eligibility: 'Yes' , city : 'San Diego'},
    { candidateId: 5, candidateName: 'Paulioa', eligibility: 'Yes' , city : 'San Diego'},
    { candidateId: 7, candidateName: 'Veronica', eligibility: 'Yes', city : 'New York' },
  ];
function getUniquePropertyValues(_array,_property)
 {
  return _array.map(element => element[_property]).
                    filter((value, index, arr) => arr.indexOf(value) === index);
}
//usage of the function getUniquePropertyValues
console.log("Unique Candidate Id Values: "+ getUniquePropertyValues(myObjectArray,"candidateId"));

Output:-

Unique Candidate Id Values: 5,6,7

Explanation:-

  • Here, in the above code, we create a function getUniquePropertyValues to return only distinct candidateId values.
  • This function needs two parameters: the array of objects (myObjectArray) and the property name (candidateId) with desired distinct values.
  • Firstly create a new array with only candidateId values using map().
  • Then, we compare these candidateId values and separate unique values using filter().
  • Finally, return this unique candidateId values.

Get Unique Values from an Array of Objects using reduce()

Javascript’s reduce() method is executed on all array elements, and the reducer callback function is run on them to pass the return value from the preceding calculation to the next. Finally, a single result gets returned after running the reducer on all array elements.

Javascript’s includes() method checks if a specific value is contained in a particular array or not and returns true or false accordingly.

Example:-

Get unique candidateId values from the below array of objects

[ { candidateId: 5, candidateName: ‘Paul’, eligibility: ‘Yes’ , city : ‘San Diego’}, { candidateId: 6, candidateName: ‘Eva’, eligibility: ‘No’, city : ‘San Diego’}, { candidateId: 7, candidateName: ‘Veronica’, eligibility: ‘Yes’, city : ‘New York’ }, { candidateId: 5, candidateName: ‘Paul’, eligibility: ‘Yes’ , city : ‘San Diego’}, { candidateId: 5, candidateName: ‘Paulioa’, eligibility: ‘Yes’ , city : ‘San Diego’}, { candidateId: 7, candidateName: ‘Veronica’, eligibility: ‘Yes’, city : ‘New York’ }, ]

Code:-

 var myObjectArray = [
    { candidateId: 5, candidateName: 'Paul', eligibility: 'Yes' , city : 'San Diego'},
    { candidateId: 6, candidateName: 'Eva', eligibility: 'No', city : 'San Diego'},
    { candidateId: 7, candidateName: 'Veronica', eligibility: 'Yes', city : 'New York' },
    { candidateId: 5, candidateName: 'Paul', eligibility: 'Yes' , city : 'San Diego'},
    { candidateId: 5, candidateName: 'Paulioa', eligibility: 'Yes' , city : 'San Diego'},
    { candidateId: 7, candidateName: 'Veronica', eligibility: 'Yes', city : 'New York' },
  ];
  function getUniquePropertyValues(_array, _property)
 {
    return _array.reduce((arr1, arr2) => 
    {
      if (!arr1.includes(arr2[_property])) 
          {
         arr1.push(arr2[_property]); 
          }
      return arr1;
    }, []);
  }
//usage of the function getUniquePropertyValues
  distinctCandidateIds = getUniquePropertyValues(myObjectArray,"candidateId");
  console.log(distinctCandidateIds);

Output:-

[ 5, 6, 7 ]

Explanation:-

  • Here, in the above code, we create a function getUniquePropertyValues to return only distinct candidateId values. This function needs two parameters: the array of objects (myObjectArray) and the property name (candidateId) with desired distinct values.
  • A reducer function is applied to all elements of the calling array using reduce(). This reducer checks if a candidateId is present in the array or not. If not, push the candidateId to another array (arr1).
  • Finally, return the array arr1.

I hope this article helped you get distinct property values from a javascript array of objects. Good Luck !!!

Leave a Comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top