How to Find Unique Values of a Specific Key in an Array of Objects
A simple JavaScript function to find all unique values
In a previous article — Three Easy Ways to Remove Duplicate Array Values in JavaScript—we covered three different algorithms to create an array of unique values. The most common request that came from that article was a similar mechanism for a key in an array of objects.
In this article we’ll cover two separate algorithms to accomplish this and wrap up the guide with a recommendation for generalizing the strategy for easy repeated use.
Starting Data
Before we begin, here’s the data set we’ll be using. The important takeaway here is the name of the array (data) and the key we’ll be using for this guide (Market).const data = [{
"Name": "Adobe Systems Incorporated",
"Sector": "Technology",
"Market": "NASDAQ"
}, {
"Name": "American River Bankshares",
"Sector": "Finance",
"Market": "NASDAQ"
}, {
"Name": "iStar Financial Inc.",
"Sector": "n/a",
"Market": "NYSE"
}, {
"Name": "Prothena Corporation plc",
"Sector": "Health Care",
"Market": "NASDAQ"
}, {
"Name": "Matrix Service Company",
"Sector": "Basic Industries",
"Market": "NASDAQ"
}];
Chaining .map() and .filter()
This first method is going to expand on technique #2 from the previous article by using map() and filter(). The purpose of map() is to transform each array element while the purpose of filter() is to return a subset of the elements. By chaining these methods together, we are able to modify the array of objects into an array of strings, then filter the resulting array to remove the duplicates.const uniques = data.map(
(obj) => {
return obj.Market
}
).filter(
(item, index, arr) => {
return arr.indexOf(item) == index
}
);
Learning to use .map() and .filter() is incredibly powerful. Check out this other article for more explanation and examples.
Modifying Spread/Set Technique
Our second method is more condensed and probably easier to read; however, the spread operator (…) requires ES6 and if you’re working on an older JavaScript version it may not work.
The general strategy of this algorithm is to again use map() to convert the array of objects to an array of strings followed by creating a Set which does not allow duplicate values by definition. Finally, we’ll use the spread operator to populate a fresh array — our original data type.const uniques = [...
new Set(data.map(
(obj) => {
return obj.Market
})
)];
Upgrade to Using a Function
A key distinction between working with an array of objects vs an array of strings is that the object key becomes a point of variance. It’s difficult to copy/paste the code snippet because we’re having to specify the object key inline with the code.
To improve the ability to reuse our algorithm, let’s create a function that takes in two inputs (array of objects and name of the key) and returns the array of unique values.function uniqueKeyValues(arr, key) {
return [... new Set(arr.map((obj) => {return obj[key]}))];
}
Take note that we can easily use the map/filter technique for creating our function as well. Simply replace data with arr and replace .Market with [key] just like we did with the spread/set techinque.
Please share your experiences, questions, and feedback below. Follow Code 85 for more plain language programming guides. Thanks for reading!