Get Unique Values from an Array of Objects

April 30, 2023 / Javascript / By

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:-

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’ }, ]

Frequently Asked:

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 !!!

Related posts:

  1. Javascript: Check if string contains substring
  2. Javascript: Check if string is empty (6 ways)
  3. Javascript: Replace all occurrences of string (4 ways)
  4. Javascript: Replace all occurrences of a character in string (4 ways)
  5. Javascript: Replace special characters in a string
  6. Javascript: String replace all spaces with underscores (4 ways)
  7. Javascript: Check if string is url
  8. Javascript: Replace a character in string at given index
  9. Javascript: Check if a string contains numbers
  10. Loop through string in javascript
  11. Javascript: replace multiple characters in string
  12. Javascript: Check if string contains only digits
  13. Javascript: How to check if a string starts with another string (4 ways)
  14. Javascript: Remove first character from a string
  15. Javascript: Remove last character of string
  16. Javascript: How to remove text from string
  17. Remove character at a specific index from a string in javascript
  18. Javascript: Remove spaces from a string
  19. Javascript: String remove special characters
  20. Javascript remove line breaks from string (4 ways)

Leave a Comment

Your email address will not be published. Required fields are marked *

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

Scroll to Top