Loop Through Nested JSON Object JavaScript
Last Updated : Mar 11, 2024
IN - JavaScript JSON | Written & Updated By - Pragati
In this article we will show you the solution of loop through nested json object javascript, an organization's employees are listed in a collection that contains detailed information about them. There are some values to be found within the nested collection of details.
JSON objects are collections of data, and nested JSON objects are collections of information inside a JSON object.
The method for accessing nested json objects is the same as the procedure for accessing arrays.
The term nested object refers to an object enclosed by another object. Javascript objects are iterated over by going through keys and properties. An array can be used to retrieve a list of keys or values.
Step By Step Guide On Loop Through Nested JSON Object JavaScript :-
<!DOCTYPE html>
<html>
<head>
<body>
<h2 style="color:green;">
TalkersCode
</h2>
<script>
var employees = [
{
"emp_id":101,
"empname":"Ron",
"salary":60000,
"address" :
{
"street-no":20,
"plot-no":121,
"city":"Pune",
"contact" :
{
"landline" : 0000000,
"mobile" : 1234567890
}
}
},
{
"emp_id":102,
"empname":"Siya",
"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>
- Browsers use this command to determine which HTML version they are using. The HTML tags at the beginning of a document are known as the heading tags.
- The <head> tag can be used to describe a project's heading.
- Step-by-step tags are used when external style sheets have a full URL or a path relative to the current page.
- Next, close the stylesheet and head by using </stylesheet> </head>
- In the next step, we create paragraphs by using the p> tag.
- There are two script tags: one explains the javascript code used and the other explains the code we used for the javascript Google API.
- Variables in programs are declared with the var tag.
- It is necessary to have a key to collect data.
- The console is known by no other name. Using the log() method, you can write HTML messages to the console. The message indicates an important message during a program test. Calls to the console pass messages as parameters.
- The programme includes an explanation of looping.
- Following that, all tags should be closed before running the code, followed by </script></body></html>.
Conclusion :-
The keys of all objects are stored in an array returned by some methods.
If you require both keys and values, you can use Object.entries(). As an alternative to using its value, you can also use its key to access the value.
I hope this article on loop through nested JSON object JavaScript helps you and the steps and method mentioned above are easy to follow and implement.
About Pragati
