Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to filter nested objects in JavaScript?
Overview
A nested object in JavaScript is a simple object enclosed within the curly brackets, and to make a nested object an object is to inherit its own object. So to filter the object in JavaScript, JavaScript has provided its own method named "filter()", this filter() method takes the argument as a callback function in which a condition is returned at which the given array object will be filtered. So to achieve this filter task we will have to create a simple object as we create in other programming languages and then we will inherit some key value in the object as a nested value that will make a nested object.
Syntax
The basic Syntax to use the filter() method is shown below. In the given Syntax the "objectName" will be replaced with the name of the object that you will create and return the condition of the filter at which condition you want to filter the given nested object.
objectName.filter(function(){
return condition;
});
Algorithm
Step 1 − Create a HTML file in your text editor with the file name "index.html", add the HTML boilerplate to the index file.
Step 2 − Now create a parent div container in the body tag with the id name as "Output".
<div id="Output"> </div>
Step 3 − Now add the script tag before the closing tag of the body.
<script></script>
Step 4 − Create an empty array variable.
var myObj = [];
Step 5 − Now add the object data to the above variable created with the nested object.
var myObj = [
{
product_id: 1,
product_name: " product1 ",
product_price:{
MRP_Price:50000,
Discount_Price:48000
},
product_description: "Product description for product 1. Do not take this description for the above product."
},
{
product_id: 2,
product_name: " product2 ",
product_price:{
MRP_Price:40000,
Discount_Price:38000
},
product_description: "Product description for product 2. Do not take this description for the above product."
},
{
product_id: 3,
product_name: " product3 ",
product_price:{
MRP_Price:60000,
Discount_Price:58000
},
product_description: "Product description for product 3. Do not take this description for the above product."
},
{
product_id: 4,
product_name: " product4 ",
product_price:{
MRP_Price:52000,
Discount_Price:50000
},
product_description: "Product description for product 4. Do not take this description for the above product."
}
];
Step 6 − Now use the filter method to filter the nested object and store it into a variable.
var filteredObj = myObj.filter(function (item) {
});
Step 7 − Return the condition at which you have to filter the data.
var filteredObj = myObj.filter(function (item) {
return item.product_price.Discount_Price >= 50000;
});
Step 8 − Now the filtered data is in the variable in the form of an object.
Step 9 − Use the HTML table to display the filtered data in the form of a table.
var productTable = "";
filteredObj.forEach(function (item) {
productTable += `
<table border="2" align="center" style="margin:1rem 0; text-align:center;">
<tr>
<th>Id</th>
<th>Name</th>
<th>MRP Price</th>
<th>Discounted Price</th>
<th>Description</th>
</tr>
<tr>
<td>`+ item.product_id + `</td>
<td>`+ item.product_name + `</td>
<td>`+ item.product_price.MRP_Price + `</td>
<td>`+ item.product_price.Discount_Price + `</td>
<td>`+ item.product_description + `</td>
</tr>
</table>`
});
document.getElementById("Output").innerHTML = productTable;
Step 10 − The filtered data is displayed in the browser.
Example
In this Example we will create a nested object data of the product id, name, price with the nested mrp price and discounted price and the product description. So in this Example our main task is to filter out the data using the filter() method, in this we will set the condition at which the object will be filtered at the filter method return value and after filtering the data we will display the data in the table form so it will be easy for the user to analyze the filtered data from the nested object data.
<html>
<head>
<title> filter nested objects </title>
</head>
<body>
<h3> Filtered nested objects using filter() method </h3>
<div id="Output"> </div>
<script>
var myObj = [
{
product_id: 1,
product_name: "product1",
product_price:{
MRP_Price:50000,
Discount_Price:48000
},
product_description: "Product description for the product. Do not take this description for the above product."
},
{
product_id: 2,
product_name: "product2",
product_price:{
MRP_Price:40000,
Discount_Price:38000
},
product_description: "Product description for the product. Do not take this description for the above product."
},
{
product_id: 3,
product_name: "product3",
product_price:{
MRP_Price:60000,
Discount_Price:58000
},
product_description: "Product description for the product. Do not take this description for the above product."
},
{
product_id: 4,
product_name: "product4",
product_price:{
MRP_Price:52000,
Discount_Price:50000
},
product_description: "Product description for the product. Do not take this description for the above product."
}
];
var filteredObj = myObj.filter(function (item) {
return item.product_price.Discount_Price >= 50000;
});
var productTable = "";
filteredObj.forEach(function (item) {
productTable += `
<table border="2" align="center" style="margin:1rem 0; text-align:center;">
<tr>
<th>Id</th>
<th>Name</th>
<th>MRP Price</th>
<th>Discounted Price</th>
<th>Description</th>
</tr>
<tr>
<td>`+ item.product_id + `</td>
<td>`+ item.product_name + `</td>
<td>`+ item.product_price.MRP_Price + `</td>
<td>`+ item.product_price.Discount_Price + `</td>
<td>`+ item.product_description + `</td>
</tr>
</table>`
});
document.getElementById("Output").innerHTML = productTable;
</script>
</body>
</html>
The given below image shows the Output of the above Example, when we load the above Example the object list will also be loaded and stored in the variable as "myObj". Using the filter this myObj will e filtered as we have taken two prices in price key value as "MRP_Price'' and "Discount_Price", so in the filter return we had set the condition to filter only those data whose discount price is greater equal (>=) to 50000. So the object will filter only product 3 and product 4 as their discounted price is greater than 50000. These data will be displayed in the form of a table.
Conclusion
As in the above Example we had displayed the filtered data in the table form, we can also display the data without the table simply by displaying it in the console. But before displaying the data to the console you should convert the data to string because the data is in the form of an object. We can convert the data object to string using (JSON.stringify(filteredObjName)), this is the stringify method for the object like JSON. This filtering of objects is used in applications like contacts, e−commerce and many more. The e−commerce uses the filter to sort the product according to the rating, prices.
908 Views
