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





Recent Posts:
Hello there!,

You are using AdBlocker!

I am an independent developer trying to help fellow developers and students to resolve issues faced on a day-to-day basis, we 'Code to Care' . There is a lot of expenses involved in hosting and managing a website that's the reason we have ads.

A humble request to you to disable adBlocker on Code2care.org and support us pay our bills.

Thanks,
Cod2ecare - Line's of code for change.

To see contents reload page after unblocking
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, Video Tutorials, Code Snippets, How Tos, Blogs, Articles, etc.