“JSON” (Javascript Object Notation) is Open standard to transmit data between endpoints. It is light weighted than XML, that’s why it is commonly used in web applications and distributed applications.Here I am describing an example to simply use JSON in your application and how to iterate JSON object if it have multiple rows.
Declaring a JSON object:
var EmployeeList =
{
Employee:
[
{Name: "uma", Age: 25, City: "Delhi"},
{Name: "lalit", Age: 26, City: "Pune" },
{Name: "dev", Age: 29, City: "Banglore"}
]
}
In above declaration, EmployeeList contains an employee collection.Suppose we have to shown this data into table empbyFor and empbyEach.
<div>
<h4>Iteration using For</h4>
<table id="empbyFor" border="1">
<thead>
<tr>
<td>Name</td>
<td>Age</td>
<td>City</td>
</tr>
</thead>
</table>
<h4>Iteration using Each</h4>
<table id="empbyEach" border="1">
<thead>
<tr>
<td>Name</td>
<td>Age</td>
<td>City</td>
</tr>
</thead>
</table>
</div>
To append data for these tables you can follow one of below approaches.
Iterating JSON data by FOR Loop:
function ShowDatabyForLoop(eList)
{
var len = $(eList).length;
var tr = "<tr>";
for(var i=0;i<len;i++)
{
tr += "<td>"+eList.Name+"</td>";
tr += "<td>" + eList.Age + "</td>";
tr += "<td>" + eList.City + "</td>";
tr += "</tr>";
}
$('#empbyFor').append(tr);
}
Iterating JSON data by JQuery each:
function ShowDatabyEach(eList)
{
alert(JSON.stringify(eList))
var tr = "<tr>";
$(eList).each(function (index, element) {
tr += "<td>" + element.Name + "</td>";
tr += "<td>" + element.Age + "</td>";
tr += "<td>" + element.City + "</td>";
tr += "</tr>";
});
$('#empbyEach').append(tr);
}
Output:
Iteration using For:
Name | Age | City |
uma | 25 | Delhi |
lalit | 26 | Pune |
dev | 29 | Banglore |
Iteration using Each:
Name | Age | City |
uma | 25 | Delhi |
lalit | 26 | Pune |
dev | 29 | Banglore |
The complete code for this demo :
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var EmployeeList =
{
Employee:
[
{Name: "uma", Age: 25, City: "Delhi"},
{Name: "lalit", Age: 26, City: "Pune" },
{Name: "dev", Age: 29, City: "Banglore"}
]
}
ShowDatabyForLoop(EmployeeList.Employee);
ShowDatabyEach(EmployeeList.Employee);
});
//Method 1
function ShowDatabyForLoop(eList)
{
var len = $(eList).length;
var tr = "<tr>";
for(var i=0;i<len;i++)
{
tr += "<td>"+eList.Name+"</td>";
tr += "<td>" + eList.Age + "</td>";
tr += "<td>" + eList.City + "</td>";
tr += "</tr>";
}
$('#empbyFor').append(tr);
}
//Method 2
function ShowDatabyEach(eList)
{
alert(JSON.stringify(eList))
var tr = "<tr>";
$(eList).each(function (index, element) {
tr += "<td>" + element.Name + "</td>";
tr += "<td>" + element.Age + "</td>";
tr += "<td>" + element.City + "</td>";
tr += "</tr>";
});
$('#empbyEach').append(tr);
}
</script>
</head>
<body>
<form id="form1">
<div>
<h4>Iteration using For</h4>
<table id="empbyFor" border="1">
<thead>
<tr>
<td>Name</td>
<td>Age</td>
<td>City</td>
</tr>
</thead>
</table>
<h4>Iteration using Each</h4>
<table id="empbyEach" border="1">
<thead>
<tr>
<td>Name</td>
<td>Age</td>
<td>City</td>
</tr>
</thead>
</table>
</div>
</form>
</body>
</html>
