How to Get Unique Values from an Array of Objects in TypeScript?

by

In this tutorial, I will explain how to extract distinct values from an array of objects in TypeScript. We will also see different methods, including using the filter() method combined with indexOf(), and leveraging the Set object. For each method, we have examples.

Get Unique Values from an Array of Objects in TypeScript

Let me show you different methods to get unique values from an array of objects in TypeScript with examples.

Using filter() and indexOf() to Get Distinct Values

One effective way to get distinct values from an array of objects in TypeScript is by using the filter() method in combination with indexOf(). This approach ensures uniqueness by checking if the current object’s property value matches the first occurrence in the array. Here’s an example:

interface Person {
  name: string;
  age: number;
  city: string;
}

const people: Person[] = [
  { name: "John", age: 25, city: "New York" },
  { name: "Sarah", age: 30, city: "Los Angeles" },
  { name: "Mike", age: 35, city: "Chicago" },
  { name: "John", age: 40, city: "Houston" },
  { name: "Emily", age: 28, city: "New York" },
];

const uniquePeople = people.filter(
  (person, index, self) =>
    index === self.findIndex((p) => p.name === person.name)
);

console.log(uniquePeople);

In this example, we have an array of Person objects, and we want to extract distinct values based on the name property. The filter() method iterates over each object in the people array. For each object, we use findIndex() to find the index of the first occurrence of an object with the same name. If the current index matches the index of the first occurrence, it means the object is unique, and it is included in the resulting uniquePeople array.

The output will be:

[
  { name: "John", age: 25, city: "New York" },
  { name: "Sarah", age: 30, city: "Los Angeles" },
  { name: "Mike", age: 35, city: "Chicago" },
  { name: "Emily", age: 28, city: "New York" }
]

As you can see, the duplicate “John” object is removed, and we end up with an array containing unique Person objects based on the name property.

Here is the exact output in the screenshot below, after I executed the code using VS code.

Get Unique Values from an Array of Objects in TypeScript

Read Remove Duplicates from an Array of Objects in TypeScript

Use the Set Object for Distinct Values

Another efficient way to get unique values from an array is by utilizing the Set object in TypeScript. A Set is a built-in object that allows you to store unique values of any type. By converting an array to a Set and then back to an array, you can easily remove duplicates. Here’s an example:

const cities: string[] = [
  "New York",
  "Los Angeles",
  "Chicago",
  "Houston",
  "New York",
  "Miami",
  "Los Angeles",
];

const uniqueCities = [...new Set(cities)];

console.log(uniqueCities);

In this example, we have an array of cities with duplicate values. To get distinct city names, we create a new Set object from the cities array using the new Set() constructor. The Set object automatically removes any duplicate values. Finally, we use the spread operator (...) to convert the Set back into an array, resulting in uniqueCities.

The output will be:

["New York", "Los Angeles", "Chicago", "Houston", "Miami"]

As you can see, the duplicate city names are removed, and we obtain an array with unique values.

Here is the exact output in the screenshot below:

How to Get Unique Values from an Array of Objects in TypeScript

Conclusion

In this tutorial, we explained different techniques to get unique values from an array of objects in TypeScript. We learned how to use the filter() method combined with indexOf() to extract distinct values based on a specific property. Additionally, we saw using the Set object in removing duplicates from an array efficiently.

I hope this tutorial shows us how to get unique values from an array of objects in TypeScript.

You may also like: