JSON example in JavaScript for beginner

JSON stands for “JavaScript Object Notation“. JSON is a lightweight data-interchange format  which is fast and easy for humans to read and write. That means it is really very simple and easy to learn without sparing much time. In another words we can say that JavaScript Object Notation is a lightweight data-interchange format that is completely language independent but with some conventions.

 

JSON is built on two structures:

  • Data is in name/value pairs
  • Each name is followed by : (colon) and value
  • The name/value pairs are separated by , (comma)
  • JSON objects are written inside curly brackets,
  • And  JSON arrays are written inside square brackets.

 

There few ways we can create JSON object with JavaScript. For example:

var JSONObjectName = { “name”: “amin”, ” isMale”: true};

 

The above code will create an Object with the attribute “name” which contains value in String and “isMale” containing Boolean value. To access attributes of JSON object we can use only “.” operator. Let’s create a JSON object and built a table getting data from JSON object.

<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>JSON Example with JavaScript | tutpub.com</title>

<style type=”text/css”>
table {
width:500px;
margin:0 auto;
background:#999999;
}
th {
background:#CCCCCC;
}
td {
background:#EEEEEE;
}
</style>

<script type=”text/javascript”>
function getJsonResult() {    //WE CALLED THIS JAVASCRIPT FUNCTION UNSING ONLOAD ATTRIBUTE OF HTML BODY TAG

//CREATING JSON OBJECTS WITH EXAMPLE DATA
var employees = {
“field_title” : {//DEFINING COLUMN TITLE FOR TABLE
“empName”: “Employee Name”, “empEmail” : “Employee Email”, “empAge” : “Employee Age”
},
“records” : [//DEFINING RECORDS OF EMPLOYEE
{“empName”: “Mohammad Asif”, “empEmail”: “asif@yahoo.com”, “empAge”: 27 },
{“empName”: “Asraf Khan”, “empEmail”: “khan@gmail.com”, “empAge”: 23 },
{“empName”: “Sandeep Kumar”, “empEmail”: “kumar@tutpub.com”, “empAge”: 21 },
{“empName”: “Steve Waugh”, “empEmail”: “steve@hotmail.com”, “empAge”: 41 }
]
}

var table_html = “”;
table_html += ‘<table>’;
for(var key in employees){

if(key==”field_title”)
{
table_html += ‘<tr>’;
for(var field in employees.field_title)
{
table_html += ‘<th>’;
table_html += employees.field_title[field];
table_html += ‘</th>’;
}
table_html += ‘</tr>’;
}

if(key==”records”)
{
for(var i=0;i<employees.records.length;i++)
{
table_html += ‘<tr>’;
for(var field in employees.records[i])
{
table_html += ‘<td>’;
table_html += employees.records[i][field];
table_html += ‘</td>’;
}
table_html += ‘</tr>’;
}
}
}
table_html += ‘</table>’;
document.getElementById(“employee_table”).innerHTML = table_html;//LOADINGT TABLE INSIDE THE employee_table DIV
}
</script>
</head>

<body onload=”getJsonResult();”>
<div id=”employee_table”></div>
</body>
</html>

Here is the output:

json example tutorial

Download the JSON Example Source Code.

Author Info

Shah Alom

Hi, This is Mohammad Shah Alom, My passion is Programming & Web Development. I am Founder of Micro Solutions Bangladesh. My Facebook profile shahalom1983 & Twitter Profile shahalom_83