How to filter nested objects in JavaScript?

Filtering nested objects in JavaScript is a common task when working with complex data structures. Nested objects contain objects as values within their properties, and JavaScript's filter() method allows us to filter arrays of such objects based on conditions that access nested properties.

Understanding Nested Objects

A nested object is an object that contains other objects as property values. For example, a product object might have a nested price object:

const product = {
    id: 1,
    name: "Laptop",
    price: {
        mrp: 50000,
        discount: 48000
    }
};

console.log(product.price.discount); // Accessing nested property

48000

Syntax

The filter() method creates a new array with elements that pass a test condition. For nested objects:

array.filter(function(item) {
    return item.nestedObject.property condition;
});

Example: Filtering Products by Nested Price

Let's filter an array of products based on their nested discount price property:

const products = [
    {
        id: 1,
        name: "Laptop",
        price: {
            mrp: 50000,
            discount: 48000
        }
    },
    {
        id: 2,
        name: "Phone",
        price: {
            mrp: 40000,
            discount: 38000
        }
    },
    {
        id: 3,
        name: "Tablet",
        price: {
            mrp: 60000,
            discount: 58000
        }
    }
];

// Filter products with discount price >= 50000
const expensiveProducts = products.filter(function(product) {
    return product.price.discount >= 50000;
});

console.log("Expensive products:", expensiveProducts.length);
expensiveProducts.forEach(product => {
    console.log(`${product.name}: $${product.price.discount}`);
});

Expensive products: 2
Laptop: $48000
Tablet: $58000

Multiple Nested Conditions

You can combine multiple conditions when filtering nested objects:

const employees = [
    {
        name: "John",
        details: {
            department: "IT",
            salary: 75000,
            experience: 5
        }
    },
    {
        name: "Sarah",
        details: {
            department: "IT",
            salary: 65000,
            experience: 3
        }
    },
    {
        name: "Mike",
        details: {
            department: "HR",
            salary: 55000,
            experience: 7
        }
    }
];

// Filter IT employees with salary > 60000
const seniorITEmployees = employees.filter(employee => {
    return employee.details.department === "IT" && 
           employee.details.salary > 60000;
});

console.log("Senior IT employees:");
seniorITEmployees.forEach(emp => {
    console.log(`${emp.name}: $${emp.details.salary}`);
});

Senior IT employees:
John: $75000
Sarah: $65000

Using Arrow Functions

Modern JavaScript allows more concise syntax using arrow functions:

const books = [
    {
        title: "JavaScript Guide",
        metadata: { pages: 350, rating: 4.5 }
    },
    {
        title: "Python Basics",
        metadata: { pages: 250, rating: 4.8 }
    },
    {
        title: "Web Development",
        metadata: { pages: 450, rating: 4.2 }
    }
];

// Filter books with rating > 4.3 and pages < 400
const goodShortBooks = books.filter(book => 
    book.metadata.rating > 4.3 && book.metadata.pages < 400
);

console.log("Good short books:");
goodShortBooks.forEach(book => console.log(book.title));

Good short books:
JavaScript Guide
Python Basics

Key Points

• Use dot notation to access nested properties: object.nested.property
• The filter() method returns a new array without modifying the original
• Combine multiple conditions using logical operators (&&, ||)
• Arrow functions provide cleaner syntax for simple filters

Conclusion

Filtering nested objects in JavaScript using the filter() method is essential for processing complex data structures. By accessing nested properties with dot notation and combining conditions, you can efficiently extract the data you need from arrays of nested objects.