Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

How to filter nested objects in JavaScript ?

  • Difficulty Level : Medium
  • Last Updated : 05 Nov, 2020

The filter() method creates a new array with all elements that pass the test implemented by the provided function.

Approach 1: This approach uses filter() method to filter the nested object in JavaScript.

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

Example:

HTML






<!DOCTYPE html>
<html>
  
<body>
    <h2>Output</h2>
    <p id="Output"></p>
  
    <script>
        var nestedObject = [
            {
                itemId: 1,
                itemDetails: {
                    name: "C",
                    caregory: "Programming Language",
                    price: 500,
                },
                itemCategory: "Basic",
            },
            {
                itemId: 2,
                itemDetails: {
                    name: "C++",
                    caregory: "Programming Language",
                    price: 700,
                },
                itemCategory: "Beginner",
            },
            {
                itemId: 1,
                itemDetails: {
                    name: "Java Script",
                    caregory: "Web Development",
                    price: 1500,
                },
                itemCategory: "Advanced",
            }]
        let itemNames = nestedObject.filter(
            eachObj => eachObj.itemDetails.price === 1500);
  
        document.getElementById("Output").innerHTML
            = JSON.stringify(itemNames);
    </script>
</body>
  
</html>

Output:

In the above example, only “JavaScript” is the name of the course with price “1500”.

Approach 2: This approach uses some() method to filter the nested objects. The some() method tests whether at least one element in the array passes the test implemented by the provided function. It returns a Boolean value.

Example:

HTML




<!DOCTYPE html>
<html>
  
<body>
    <h2>Output</h2>
    <p id="Output"></p>
  
    <script>
        const fruitData = [
            {
                name: "Apples",
                details: [
                    {
                        fruitId: '1',
                        gradingDetails: [{ grade: 'A' }]
                    },
                    {
                        fruitId: '2',
                        gradingDetails: [{ grade: 'B' }]
                    }
                ]
            },
            {
                name: "Oranges",
                details: [
                    {
                        fruitId: '3',
                        gradingDetails: [{ grade: 'B' }]
                    },
                    {
                        fruitId: '4',
                        gradingDetails: [{ grade: 'D' }]
                    }
                ]
            },
        ];
  
        let output = fruitData.filter(eachVal => {
            let opt = eachVal.details.some((
                { gradingDetails }) => gradingDetails
                .some(({ grade }) => grade === 'A'));
            return opt;
        })
        console.log(output);
        document.getElementById("Output").innerHTML =
            JSON.stringify(output);
    </script>
</body>
  
</html>

Output:

In the above example, the fruitId is 1 for “Apples”and grade is “A”. But for Oranges neither of them satisfies the option.




My Personal Notes arrow_drop_up
Recommended Articles
Page :