How to filter nested JSON object to return certain value using JavaScript ?

Last Updated : 12 Apr, 2023

Given a collection that contains the detail information of employees who are working in the organization. We need to find some values from that nested collections of details. That collection is known as the JSON object and the information inside object are known as nested JSON object.

Example 1: We create the nested JSON objects using JavaScript code. Consider an example, suppose there are details of 4 employees and we need to find the street number of the first employee then it can be done in the following way.

employees[0].address.["street-no"]

If we need to find the residential details of the second employee then use the following instruction.

employees[1].address.["street-no"]

Note: The dot is an operator which indicates that select the street number from the address field of the first employee. That “street-no” is inside the “address”, so the dot operator is used.

To print the above result in the document, we need to use document.write

html

<!DOCTYPE html> 
<html> 
  
<body> 
    <h2 style="color:green;"> 
        GeeksForGeeks 
    </h2> 
  
    <script> 
        var employees = [ 
        { 
            "emp_id":101, 
            "empname":"Ram", 
            "salary":60000, 
            "address" :  
            { 
                "street-no":20, 
                "plot-no":121, 
                "city":"pune", 
                "contact" :  
                { 
                    "landline" : 2292099, 
                    "mobile" : 8907632178 
                } 
            } 
        }, 
        { 
            "emp_id":102, 
            "empname":"Shyam", 
            "salary":50000, 
            "address" :  
            { 
                "street-no":12, 
                "plot-no":221, 
                "city":"pune" 
            } 
        }, 
        { 
            "emp_id":103, 
            "empname":"Lakhan", 
            "salary":40000, 
            "address" :  
            { 
                "street-no":11, 
                "plot-no":432, 
                "city":"pune" 
            } 
        }, 
        { 
            "emp_id":104, 
            "empname":"Snigdha", 
            "salary":60000, 
            "address" :  
            { 
                "street-no":21, 
                "plot-no":222, 
                "city":"pune" 
            } 
        }] 
  
        document.write("<b>" + "Employee Id : " 
            + "</b>" + employees[0].emp_id + "<br>"); 
  
        document.write("<b>" + "Employee Name : "  
            + "</b>" + employees[0].empname + "<br>"); 
  
        document.write("<b>" + "Employee Salary : " 
            + "</b>" + employees[0].salary + "<br>"); 
  
        document.write("<b>" + "Address -> "  
            + "Street Number : " + "</b>" + 
            employees[0].address["street-no"]); 
    </script> 
</body> 
  
</html> 

Output:

Example 2: We need to create the nested JSON objects using JavaScript. Consider an example that contains the information of 4 employees and we need to find the mobile number of the first employee then it can be done in the following manner.

employees[0].address.contact["mobile"]

To find the contact details of the second employee.

employees[1].address.contact["mobile"]

The dot operator is used for selecting the mobile from the contact field of the address field of the second employee.

html

<!DOCTYPE html> 
<html> 
  
<body> 
    <h2 style="color: green;"> 
        GeeksForGeeks 
    </h2> 
    <script> 
        var employees = [ 
        { 
            "emp_id":101, 
            "empname":"Ram", 
            "salary":60000, 
            "address" :  
            { 
                "street-no":20, 
                "plot-no":121, 
                "city":"pune", 
                "contact" :  
                { 
                    "landline" : 2292099, 
                    "mobile" : 8907632178 
                } 
            } 
        }, 
        { 
            "emp_id":102, 
            "empname":"Shyam", 
            "salary":50000, 
            "address" :  
            { 
                "street-no":12, 
                "plot-no":221, 
                "city":"pune" 
            } 
        }, 
        { 
            "emp_id":103, 
            "empname":"Lakhan", 
            "salary":40000, 
            "address" :  
            { 
                "street-no":11, 
                "plot-no":432, 
                "city":"pune" 
            } 
        }, 
        { 
            "emp_id":104, 
            "empname":"Snigdha", 
            "salary":60000, 
            "address" :  
            { 
                "street-no":21, 
                "plot-no":222, 
                "city":"pune" 
            } 
        }] 
  
        document.write("<b>" + "Employee Id : " 
            + "</b>" + employees[0].emp_id + "<br>"); 
  
        document.write("<b>" + "Employee Name : "  
            + "</b>" + employees[0].empname + "<br>"); 
  
        document.write("<b>" + "Employee Salary : "  
            + "</b>" + employees[0].salary + "<br>"); 
  
        document.write("<b>" + "Address -> "  
            + "Street Number : " + "</b>" 
            + employees[0].address["street-no"] + "<br>"); 
  
        document.write("<b>" + "Address -> "  
            + "Phone Number -> " + "</b>" 
            + "<b>" + "Mobile : " + "</b>" 
            + employees[0].address.contact["mobile"] 
            + "<br>"); 
    </script> 
</body> 
  
</html> 

Output:

Example 3: We have created a JSON object that consists personal details like their first name, last name, gender etc. using JavaScript. Suppose, our JSON object contains details of 2 people and we need to find the first name and last name of the second person then we need to do the following.

For first name

Person[1].Name["FirstName"]

For Last name

Person[1].Name["LastName"]

html

<!DOCTYPE html> 
<html> 
  
<body> 
    <h2 style="color: green;"> 
        GeeksForGeeks 
    </h2> 
  
    <script> 
        var Person = [ 
        { 
            "Name" : { 
                "FirstName" : "Smita", 
                "LastName" : "Verma" 
            }, 
            "Degree" : { 
                "BE" : "CSE", 
                "MTECH" : "CSE" 
            }, 
            "Gender" : "Female"     
        }, 
        { 
            "Name" : { 
                "FirstName" : "Ramesh", 
                "LastName" : "Rajput" 
            }, 
            "Degree" : { 
                "BE" : "CIVIL", 
                "MTECH" : "CIVIL" 
            }, 
            "Gender" : "Male"     
        }] 
  
        document.write("<b>" + "FirstName : " + "</b>"  
            + " " + Person[1].Name["FirstName"] + "<br>"); 
  
        document.write("<b>" + "LastName :" + "</b>" + " " 
            + Person[1].Name["LastName"] + "<br>"); 
  
        document.write("<b>" + "Degree : " + "->" + "BE : " 
            + "</b>" + " " + Person[1].Degree["BE"] + "<br>"); 
  
        document.write("<b>" + "Gender :" + "</b>" + " "  
            + Person[1].Gender + "<br>"); 
    </script> 
</body> 
  
</html> 