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 a nested JSON object to return certain value using JavaScript?
Overview
An object in JavaScript is a set of the data that is contained inside the curly braces in the key value pair form. An object in JavaScript is created by using the curly braces and defining the set of data inside it. A nested JSON object is also a set of a key value pair but in nested the key contains a set of objects inherited in it. We can use the two formats of accessing the value in the JSON objects: the first method is by directly accessing the value and the second method is by using the filter() method. The filter() method returns a value which is true for the condition passed as a callback function inside the filter() method.
Syntax
The Syntax to directly access the value from an object is.
When an nested JSON object is created inside an array.
arrayVariableName[indexNumber].keyName
When an nested JSON object is created inside an object.
objectVariableName.keyName
Algorithm
Step 1 − Create a HTML file on your text editor with the filename as "index.html" and add the HTML boilerplate to the index.html file.
Step 2 − Now create an empty parent div container which will contain the returned Output from the nested JSON object, add an id name to the parent container as "Output".
<div id="Output"></div>
Step 3 − Now add the script tag before the end of the closing body tag.
<script> </script>
Step 4 − Now create an array to add the nested JSON object to it.
var details = [];
Step 5 − Now add the JSON data to the array with some nested key value.
var details = [{
"CustomerName": "Aman",
"Items": { "Product1": "Maggi", "Product2": "Pizza" },
"TotalAmount": 4000
},
{
"CustomerName": "Alex",
"Items": { "Product1": "Cold_Drink", "Product2": "Rajma", "Product3": "Cups" },
"TotalAmount": 8000
},
{
"CustomerName": "Zoya",
"Items": { "Product1": "Rasins", "Product2": "Cashew", "Product3": "Almonds" },
"TotalAmount": 5000
},
{
"CustomerName": "Amir",
"Items": { "Product1": " Oil ", "Product2": " Soaps ", "Product3": " Fruits " },
"TotalAmount": 45000
}
];
Step 6 − Now use the JavaScript DOM property to access the parent div container that we had created above with the help of id name.
document.getElementById("Output");
Step 7 − Use the innerHTML property to add a table to the container. Create the table using the basic HTML.
document.getElementById("Output").innerHTML = ``;
Step 8 − Now in the table data use the Syntax to access the key of the object and insert it in the table data area.
document.getElementById("Output").innerHTML = `
<table border="2" align="center" style="text-align: center;">
<tr>
<th> Customer Name </th>
<th> Items </th>
<th> Total Amount </th>
</tr>
<tr>
<td> `+ details[2].CustomerName + ` </td>
<td>`+ details[2].Items.Product1 + `<br>` + details[2].Items.Product2 + `<br>` + details[1].Items.Product3 + `</td>
<td> Rs.`+ details[2].TotalAmount + ` </td>
</tr>
</table>
`;
Step 9 − The filter for nested JSON objects is created successfully that will return a certain value.
Example
In this Example we will create a nested JSON object using the JavaScript Syntax and also we will access the key of the nested JSON using the direct accessing property. For this we will create an empty array and then insert the JSON object data to the array. After inserting the data we will access directly and display it into the table.
<html>
<head>
<title> filter nested objects using JavaScript </title>
<style>
td,
th {
padding: 0 0.5rem;
}
</style>
</head>
<body>
<h3 style="text-align: center;">Returning value from nested object by direct access</h3>
<div id="Output"></div>
<script>
var details = [{
"CustomerName": "Aman",
"Items": { "Product1": "Maggi", "Product2": "Pizza" },
"TotalAmount": 4000
},
{
"CustomerName": "Alex",
"Items": { "Product1": "Cold_Drink", "Product2": "Rajma", "Product3": "Cups" },
"TotalAmount": 8000
},
{
"CustomerName": "Zoya",
"Items": { "Product1": "Rasins", "Product2": "Cashew", "Product3": "Almonds" },
"TotalAmount": 5000
},
{
"CustomerName": "Amir",
"Items": { "Product1": " Oil ", "Product2": " Soaps ", "Product3": " Fruits " },
"TotalAmount": 45000
}
];
document.getElementById("Output").innerHTML = `
<table border="2" align="center" style="text-align: center;">
<tr>
<th> Customer Name </th>
<th> Items </th>
<th> Total Amount </th>
</tr>
<tr>
<td> `+ details[2].CustomerName + ` </td>
<td>`+ details[2].Items.Product1 + `<br>` + details[2].Items.Product2 + `<br>` + details[1].Items.Product3 + `</td>
<td> Rs.`+ details[2].TotalAmount + ` </td>
</tr>
</table>
`;
</script>
</body>
</html>
The below given image shows the Output of the above Example in which we have created a JSON object which is nested in an object. When a user loads the Example on the browser he will get a table with the value from the JSON object which we had access directly.
Conclusion
This filter feature for the JSON object is used to filter out the data from the API. As we had displayed the value that was predefined, in the script tag by accessing the key. So in the up gradation for the above Example we can also create a search bar from that bar a user can type the value in it and in result will get the Output on the screen.
324 Views
