How to Filter an Array of Objects in TypeScript?

When I work with API responses, dashboards, or order-processing applications, I often need to display only a subset of available data. For example, a sales dashboard may contain hundreds of orders, but a user might want to see only completed orders or orders above a specific amount.

This is where filtering an array of objects becomes useful. TypeScript gives you the same powerful array methods as JavaScript while adding static type checking, which helps catch mistakes before your code runs.

In this guide, you’ll learn several practical ways to filter an array of objects in TypeScript, from simple property checks to multiple conditions and reusable generic functions.

How to Filter an Array of Objects in TypeScript Using filter()

The most common way to filter an array of objects in TypeScript is with the filter() method.

An array is an ordered collection of values. The filter() method checks every item and returns a new array containing only the items that meet your condition.

Let’s use a sales order example.

interface Order {
    id: number;
    customer: string;
    amount: number;
    status: string;
}

const orders: Order[] = [
    { id: 101, customer: "John Miller", amount: 250, status: "Completed" },
    { id: 102, customer: "Sarah Johnson", amount: 125, status: "Pending" },
    { id: 103, customer: "Michael Davis", amount: 400, status: "Completed" },
    { id: 104, customer: "Emily Wilson", amount: 180, status: "Cancelled" }
];

const completedOrders = orders.filter(order => order.status === "Completed");

console.log(completedOrders);

Output:

[
  { id: 101, customer: 'John Miller', amount: 250, status: 'Completed' },
  { id: 103, customer: 'Michael Davis', amount: 400, status: 'Completed' }
]

You can refer to the screenshot below to see the output.

Here, the interface defines the structure of every order object. The filter() callback runs once for each order.

When the condition returns true, TypeScript includes that object in the new array.

The original orders array remains unchanged. This makes filter() useful when several parts of your application use the same source data.

You can also review TypeScript objects and advanced type safety to understand how strongly typed objects improve application code.

Filter an Array of Objects in TypeScript by a Number

You can also filter objects based on numeric properties.

For example, suppose a manager wants to see orders worth more than $200.

interface Order {
    id: number;
    customer: string;
    amount: number;
    status: string;
}

const orders: Order[] = [
    { id: 101, customer: "John Miller", amount: 250, status: "Completed" },
    { id: 102, customer: "Sarah Johnson", amount: 125, status: "Pending" },
    { id: 103, customer: "Michael Davis", amount: 400, status: "Completed" },
    { id: 104, customer: "Emily Wilson", amount: 180, status: "Cancelled" }
];

const highValueOrders = orders.filter(order => order.amount > 200);

console.log(highValueOrders);

Output:

[
  { id: 101, customer: 'John Miller', amount: 250, status: 'Completed' },
  { id: 103, customer: 'Michael Davis', amount: 400, status: 'Completed' }
]

You can refer to the screenshot below to see the output.

The condition order.amount > 200 returns true only for qualifying orders.

This approach works well for prices, quantities, scores, dates converted to timestamps, and many other numeric values.

Filter an Array of Objects with Multiple Conditions in TypeScript

Real applications often require more than one condition.

For example, you may want orders that are both completed and worth more than $200.

interface Order {
    id: number;
    customer: string;
    amount: number;
    status: string;
}

const orders: Order[] = [
    { id: 101, customer: "John Miller", amount: 250, status: "Completed" },
    { id: 102, customer: "Sarah Johnson", amount: 125, status: "Pending" },
    { id: 103, customer: "Michael Davis", amount: 400, status: "Completed" },
    { id: 104, customer: "Emily Wilson", amount: 300, status: "Cancelled" }
];

const filteredOrders = orders.filter(
    order => order.status === "Completed" && order.amount > 200
);

console.log(filteredOrders);

Output:

[
  { id: 101, customer: 'John Miller', amount: 250, status: 'Completed' },
  { id: 103, customer: 'Michael Davis', amount: 400, status: 'Completed' }
]

You can refer to the screenshot below to see the output.

The && operator means both conditions must return true.

You can also use || when either condition should match.

interface Order {
    id: number;
    customer: string;
    amount: number;
    status: string;
}

const orders: Order[] = [
    { id: 101, customer: "John Miller", amount: 250, status: "Completed" },
    { id: 102, customer: "Sarah Johnson", amount: 125, status: "Pending" },
    { id: 103, customer: "Michael Davis", amount: 400, status: "Completed" },
    { id: 104, customer: "Emily Wilson", amount: 180, status: "Cancelled" }
];

const activeOrders = orders.filter(
    order => order.status === "Completed" || order.status === "Pending"
);

console.log(activeOrders);

Output:

[
  { id: 101, customer: 'John Miller', amount: 250, status: 'Completed' },
  { id: 102, customer: 'Sarah Johnson', amount: 125, status: 'Pending' },
  { id: 103, customer: 'Michael Davis', amount: 400, status: 'Completed' }
]

For additional conditional programming patterns, see TypeScript if-else conditionals.

Filter an Array of Objects by a String Property

Filtering by a customer name, category, department, or status is another common scenario.

interface Employee {
    id: number;
    name: string;
    department: string;
}

const employees: Employee[] = [
    { id: 1, name: "Robert Smith", department: "Sales" },
    { id: 2, name: "Jennifer Brown", department: "Marketing" },
    { id: 3, name: "David Taylor", department: "Sales" },
    { id: 4, name: "Lisa Anderson", department: "Finance" }
];

const salesEmployees = employees.filter(
    employee => employee.department === "Sales"
);

console.log(salesEmployees);

Output:

[
  { id: 1, name: 'Robert Smith', department: 'Sales' },
  { id: 3, name: 'David Taylor', department: 'Sales' }
]

The strict equality operator === checks whether the property exactly matches the required value. For user-entered search values, you may need case-insensitive matching.

Filter an Array of Objects with includes()

Suppose your application has a search box for customers. You can use includes() with filter() to find partial matches.

interface Customer {
    id: number;
    name: string;
    city: string;
}

const customers: Customer[] = [
    { id: 1, name: "John Miller", city: "Chicago" },
    { id: 2, name: "Sarah Johnson", city: "Boston" },
    { id: 3, name: "Johnny Davis", city: "Dallas" },
    { id: 4, name: "Emily Wilson", city: "Seattle" }
];

const searchText = "john";

const matchingCustomers = customers.filter(customer =>
    customer.name.toLowerCase().includes(searchText.toLowerCase())
);

console.log(matchingCustomers);

Output:

[
  { id: 1, name: 'John Miller', city: 'Chicago' },
  { id: 2, name: 'Sarah Johnson', city: 'Boston' },
  { id: 3, name: 'Johnny Davis', city: 'Dallas' }
]

Converting both values with toLowerCase() creates a case-insensitive search.

This pattern works well in frontend applications and small in-memory datasets.

Filter an Array of Objects Without Changing the Original Array

One important advantage of filter() is that it does not mutate the original array.

Mutation means directly changing an existing value or object.

interface Product {
    id: number;
    name: string;
    price: number;
}

const products: Product[] = [
    { id: 1, name: "Laptop", price: 1200 },
    { id: 2, name: "Keyboard", price: 80 },
    { id: 3, name: "Monitor", price: 350 }
];

const affordableProducts = products.filter(product => product.price < 500);

console.log("Original array:");
console.log(products);

console.log("Filtered array:");
console.log(affordableProducts);

Output:

Original array:
[
  { id: 1, name: 'Laptop', price: 1200 },
  { id: 2, name: 'Keyboard', price: 80 },
  { id: 3, name: 'Monitor', price: 350 }
]

Filtered array:
[
  { id: 2, name: 'Keyboard', price: 80 },
  { id: 3, name: 'Monitor', price: 350 }
]

The original array still contains all three products.

However, remember that the returned array contains references to the same objects. If you modify an object inside the filtered result, that object also changes in the original array.

Filter a Readonly Array in TypeScript

A readonly array is an array that TypeScript prevents you from modifying directly.

You can still use filter() because it returns a new array.

interface Ticket {
    id: number;
    title: string;
    priority: "Low" | "Medium" | "High";
}

const tickets: readonly Ticket[] = [
    { id: 1, title: "Update customer portal", priority: "Low" },
    { id: 2, title: "Fix payment error", priority: "High" },
    { id: 3, title: "Review sales report", priority: "Medium" }
];

const highPriorityTickets = tickets.filter(
    ticket => ticket.priority === "High"
);

console.log(highPriorityTickets);

Output:

[
  { id: 2, title: 'Fix payment error', priority: 'High' }
]

This is useful when you want to protect API data or shared application state from accidental modification.

For more details, see readonly arrays in TypeScript.

Pro Tip: I’ve found that filtering shared API data is much safer than manually removing items from the original array. I usually keep the original response unchanged and create filtered views for the UI.

Create a Reusable Generic Filter Function

A generic function is a reusable function that works with different data types while preserving type information.

You can create a generic filter helper like this:

function filterItems<T>(
    items: T[],
    condition: (item: T) => boolean
): T[] {
    return items.filter(condition);
}

interface Product {
    id: number;
    name: string;
    price: number;
}

const products: Product[] = [
    { id: 1, name: "Laptop", price: 1200 },
    { id: 2, name: "Keyboard", price: 80 },
    { id: 3, name: "Monitor", price: 350 }
];

const productsUnder500 = filterItems(
    products,
    product => product.price < 500
);

console.log(productsUnder500);

Output:

[
  { id: 2, name: 'Keyboard', price: 80 },
  { id: 3, name: 'Monitor', price: 350 }
]

The <T> generic preserves the type of the array items. You could use the same function with Product[], Employee[], Order[], or another typed array.

This provides good type safety, especially in larger Node.js and frontend TypeScript applications.

Filter Objects by Multiple Allowed Values

Sometimes you want to include objects when a property matches one of several values.

interface Order {
    id: number;
    customer: string;
    status: string;
}

const orders: Order[] = [
    { id: 101, customer: "John Miller", status: "Completed" },
    { id: 102, customer: "Sarah Johnson", status: "Pending" },
    { id: 103, customer: "Michael Davis", status: "Cancelled" },
    { id: 104, customer: "Emily Wilson", status: "Processing" }
];

const allowedStatuses = ["Completed", "Pending"];

const visibleOrders = orders.filter(order =>
    allowedStatuses.includes(order.status)
);

console.log(visibleOrders);

Output:

[
  { id: 101, customer: 'John Miller', status: 'Completed' },
  { id: 102, customer: 'Sarah Johnson', status: 'Pending' }
]

This approach is cleaner than writing many || conditions when the number of allowed values grows.

Filter an Array of Objects by an Optional Property

Some API responses contain optional properties. TypeScript helps you handle these safely.

interface Employee {
    id: number;
    name: string;
    manager?: string;
}

const employees: Employee[] = [
    { id: 1, name: "Robert Smith", manager: "Susan Taylor" },
    { id: 2, name: "Jennifer Brown" },
    { id: 3, name: "David Taylor", manager: "Susan Taylor" }
];

const managedEmployees = employees.filter(
    employee => employee.manager !== undefined
);

console.log(managedEmployees);

Output:

[
  { id: 1, name: 'Robert Smith', manager: 'Susan Taylor' },
  { id: 3, name: 'David Taylor', manager: 'Susan Taylor' }
]

Checking for undefined prevents incorrect assumptions about missing data.

You can learn more about handling missing values in undefined and null in TypeScript.

Things to Keep in Mind

• filter() returns a new array: It does not remove objects from the original array.
• Object references remain shared: Filtering copies the array structure, not the objects themselves.
• Use interfaces for type safety: Typed object arrays make property access safer and easier to maintain.
• Avoid unnecessary filtering: Repeatedly filtering very large datasets can affect performance.
• Use strict comparisons: Prefer === instead of loose equality when comparing object properties.
• Handle optional properties carefully: Check for undefined or null before relying on optional values.

Frequently Asked Questions

Filtering an array of objects in TypeScript becomes straightforward once you understand how filter() evaluates each object. For most applications, defining a clear interface and using a focused filter condition gives you readable, type-safe code without modifying the original array.

You May Also Like

• TypeScript spread operator
• How to sort an array of objects by property value in TypeScript
• Get the first element of an array in TypeScript
• Find the length of an array in TypeScript
• How to update an object in an array in TypeScript

Bijay Kumar

Bijay Kumar is an experienced Python and AI professional who enjoys helping developers learn modern technologies through practical tutorials and examples. His expertise includes Python development, Machine Learning, Artificial Intelligence, automation, and data analysis using libraries like Pandas, NumPy, TensorFlow, Matplotlib, SciPy, and Scikit-Learn. At PythonGuides.com, he shares in-depth guides designed for both beginners and experienced developers. More about us.

enjoysharepoint.com/