JSON Nest Objects Example: JSON Tutorial


We can have Nested JSON Objects.

Nested JSON Object :
{
    "emp1" : {
	"EmpName" : "Chris Jackman",
	"EmpAge" : "34",
	"EmpGender" : "Male",
	"EmpDept" : "IT",
	"EmpDesg" : "Project Manager"
 },

    "emp2" : {
     "EmpName" : "Mary Jane",
	 "EmpAge" : "27",
	 "EmpGender" : "Female",
	 "EmpDept" : "IT",
	 "EmpDesg" : "Team Leader"
  }
}

Accessing data from Nested JSON objects is much easier to understand.

Example :

Below example has a nest JSON object employees, note we can access nested objects objName.nestedObjName.Name

<html>
<head>
<script type="text/javascript">
  function jsonNestedExample() {

   //Nest JSON Object Example 
   
   var employees = {
    "emp1" : {
	"EmpName" : "Chris Jackman",
	"EmpAge" : "34",
	"EmpGender" : "Male",
	"EmpDept" : "IT",
	"EmpDesg" : "Project Manager"
 },

    "emp2" : {
     "EmpName" : "Mary Jane",
	 "EmpAge" : "27",
	 "EmpGender" : "Female",
	 "EmpDept" : "IT",
	 "EmpDesg" : "Team Leader"
  }
 }

var data = "";

 data = data + "Name : " + employees.emp1.EmpName + "<br>";
 data = data + "Age : " + employees.emp1.EmpAge + "<br>";
 data = data + "Gender : " + employees.emp1.EmpGender + "<br>";
 data = data + "Department : " + employees.emp1.EmpDept + "<br>";
 data = data + "Designation : " + employees.emp1.EmpDesg + "<br><br>";

 data = data + "Name : " + employees.emp2.EmpName + "<br>";
 data = data + "Age : " + employees.emp2.EmpAge + "<br>";
 data = data + "Gender : " + employees.emp2.EmpGender + "<br>";
 data = data + "Department : " + employees.emp2.EmpDept + "<br>";
 data = data + "Designation : " + employees.emp2.EmpDesg + "<br><br>";

 document.getElementById("employees").innerHTML = data;
}
</script>
</head>

<body onload="jsonNestedExample();">

	<div id="employees"></div>

</body>
</html>
Output:
Name : Chris Jackman
Age : 34
Gender : Male
Department : IT
Song : Project Manager

Name : Mary Jane
Age : 27
Gender : Female
Department : IT
Song : Team Leader
Advertisements
Try Out Code2care Dev Tools:

Advertisements

Advertisements
Code2care is an initiative to publish and share varied knowledge in programming and technical areas gathered during day-to-day learnings and development activities.

Students and software developers can leverage this portal to find solutions to their various queries without re-inventing the wheel by referring to our easy to understand posts. Technical posts might include learnings, tutorials, trouble-shooting steps, video tutorials, code snippets, how-to, blogs, articles, etc.

🎉 We are celebrating the 10th years of Code2care! Thank you for all your support!

We strongly support Gender Equality & Diversity.