JSON Nest Objects Example: JSON Tutorial

📅 12 Jul 2020 14:37 GMT | 👤 @c2cDev

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

More Posts related to Json-Tutorial,

More Posts: