How to Filter an Array of Objects in TypeScript?

In this tutorial, I will explain how to filter an array of objects in TypeScript using the filter() method. The filter() method allows us to create a new array from an existing array by selecting elements based on a provided condition. I will show you a few examples of filtering an array of objects in TypeScript.

Understanding the filter() Method

In TypeScript, the filter() method is used to create a new array from an existing array by filtering out elements that meet a certain condition. The method takes a callback function as an argument, which is executed for each element in the array. If the callback function returns true, the element is included in the new array; otherwise, it is excluded.

The syntax for using the filter() method is as follows:

const filteredArray = originalArray.filter(callbackFunction);

Read How to Filter Arrays in TypeScript?

Filter an Array of Objects in TypeScript

Let’s consider a scenario where we have an array of objects representing employees in a US-based company. Each object contains properties such as name, age, position, and salary. Our goal is to filter this array based on specific criteria.

Example 1: Filtering by a Single Property

Suppose we want to filter the array to include only employees who are managers. Here is an example of filtering an array of objects by a single property in TypeScript.

interface Employee {
  name: string;
  age: number;
  position: string;
  salary: number;
}

const employees: Employee[] = [
  { name: "John Doe", age: 35, position: "Manager", salary: 80000 },
  { name: "Jane Smith", age: 28, position: "Developer", salary: 65000 },
  { name: "Michael Johnson", age: 42, position: "Manager", salary: 90000 },
  { name: "Emily Davis", age: 30, position: "Designer", salary: 70000 },
];

const managers = employees.filter((employee) => employee.position === "Manager");

console.log(managers);

In this example, we define an interface Employee to specify the structure of the employee objects. We then create an array employees with sample data.

To filter the array, we use the filter() method and provide a callback function that checks if the position property of each employee is equal to "Manager". The resulting managers array will contain only the objects that satisfy this condition.

I executed the above TypeScript code using VScode, and you can see the exact output in the screenshot below:

Check out Arrays of Objects in TypeScript

Example 2: Filtering by Multiple Properties

Let’s say we want to filter the array to include employees who are developers and have a salary greater than $60,000. We can modify the previous example as follows:

const seniorDevelopers = employees.filter(
  (employee) => employee.position === "Developer" && employee.salary > 60000
);

console.log(seniorDevelopers);

In this case, the callback function checks for two conditions using the logical AND operator (&&). Only employees who have a position of "Developer" and a salary greater than $60,000 will be included in the seniorDevelopers array.

Here is the complete code and the exact output in the screenshot below:

interface Employee {
    name: string;
    age: number;
    position: string;
    salary: number;
  }
  
  const employees: Employee[] = [
    { name: "John Doe", age: 35, position: "Manager", salary: 80000 },
    { name: "Jane Smith", age: 28, position: "Developer", salary: 65000 },
    { name: "Michael Johnson", age: 42, position: "Manager", salary: 90000 },
    { name: "Emily Davis", age: 30, position: "Designer", salary: 70000 },
  ];
  
  const seniorDevelopers = employees.filter(
    (employee) => employee.position === "Developer" && employee.salary > 60000
  );
  
  console.log(seniorDevelopers);

Read How to Sort Arrays in TypeScript?

Example 3: Filtering Nested Arrays

Sometimes, you may encounter scenarios where you need to filter an array of objects that contain nested arrays in TypeScript. Let’s consider an example where each employee object has an additional property skills, which is an array of strings.

interface Employee {
  name: string;
  age: number;
  position: string;
  salary: number;
  skills: string[];
}

const employees: Employee[] = [
  {
    name: "John Doe",
    age: 35,
    position: "Manager",
    salary: 80000,
    skills: ["Leadership", "Communication"],
  },
  {
    name: "Jane Smith",
    age: 28,
    position: "Developer",
    salary: 65000,
    skills: ["JavaScript", "TypeScript", "React"],
  },
  {
    name: "Michael Johnson",
    age: 42,
    position: "Manager",
    salary: 90000,
    skills: ["Leadership", "Strategic Planning"],
  },
  {
    name: "Emily Davis",
    age: 30,
    position: "Designer",
    salary: 70000,
    skills: ["UI/UX Design", "Graphic Design"],
  },
];

To filter employees based on a specific skill, we can use the includes() method within the filter() callback function:

const typescriptDevelopers = employees.filter((employee) =>
  employee.skills.includes("TypeScript")
);

console.log(typescriptDevelopers);

This code will filter the employees array and return only the objects where the skills array includes the string "TypeScript".

Check out Merge Arrays of Objects in TypeScript

Example 4: Filtering with Custom Functions

Sometimes, you may want to filter an array based on a more complex condition requiring a custom function. Let’s say we want to filter employees who have a name longer than 10 characters and a salary between $60,000 and $80,000.

Here is the complete TypeScript code.

function isEligibleEmployee(employee: Employee): boolean {
  return employee.name.length > 10 && employee.salary >= 60000 && employee.salary <= 80000;
}

const eligibleEmployees = employees.filter(isEligibleEmployee);

console.log(eligibleEmployees);

Here, we define a custom function isEligibleEmployee that takes an Employee object as a parameter and returns a boolean value indicating whether the employee meets the specified criteria. We then pass this function as the callback to the filter() method, which filters the employees array accordingly.

Conclusion

In this tutorial, I explained how to filter an array of objects in TypeScript using the filter() method. By providing a callback function to filter(), you can specify the conditions based on which elements should be included in the resulting array.

Throughout this tutorial, I have also explained various examples of filtering arrays of objects in TypeScript, including filtering by a single property, multiple properties, nested arrays, and using custom functions.