Click here to monitor SSC
SQLServerCentral is supported by Red Gate Software Ltd.
 
Log in  ::  Register  ::  Not logged in
 
 
 

Querying Microsoft SQL Server

I am a technology enthusiast and software developer by profession. I am developing .Net/database based enterprise applications from past 3 years.

My skills includes C# ,ASP.NET,SQL Server 2008 and MVC . My areas of interests are database development and application software development using Microsoft Technologies.

Iterating JSON data using Jquery



“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[i].Name+"</td>";
tr += "<td>" + eList[i].Age + "</td>";
tr += "<td>" + eList[i].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[i].Name+"</td>";
tr += "<td>" + eList[i].Age + "</td>";
tr += "<td>" + eList[i].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>



Comments

Leave a comment on the original post [www.queryingsql.com, opens in a new window]

Loading comments...