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

Learning Microsoft Technologies.......

Thursday, 3 July 2014

Iterating JSON data using Jquery

Declaring a JSON object:

Iterating JSON data by FOR Loop:

Iterating JSON data by JQuery each:

Iteration using For:

Iteration using Each:

No comments:

Post a Comment

Popular Posts