Iterating JSON data using Jquery

UmaShankar-Patel, 2014-07-03

“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>

Rate

Share

Share

Rate

Related content

Database Mirroring FAQ: Can a 2008 SQL instance be used as the witness for a 2005 database mirroring setup?

Question: Can a 2008 SQL instance be used as the witness for a 2005 database mirroring setup? This question was sent to me via email. My reply follows. Can a 2008 SQL instance be used as the witness for a 2005 database mirroring setup? Databases to be mirrored are currently running on 2005 SQL instances but will be upgraded to 2008 SQL in the near future.

Robert Davis

2009-02-23

1,567 reads

Networking – Part 4

You may want to read Part 1 , Part 2 , and Part 3 before continuing. This time around I’d like to talk about social networking. We’ll start with social networking. Facebook, MySpace, and Twitter are all good examples of using technology to let…

Andy Warren

2009-02-17

1,530 reads

Speaking at Community Events – More Thoughts

Last week I posted Speaking at Community Events – Time to Raise the Bar?, a first cut at talking about to what degree we should require experience for speakers at events like SQLSaturday as well as when it might be appropriate to add additional focus/limitations on the presentations that are accepted. I’ve got a few more thoughts on the topic this week, and I look forward to your comments.

Andy Warren

2009-02-13

360 reads