Question

I have a JSON which looks like this

{
secInfo: [
 {
  loginResult: 1,
  userId: "admin",
  userName: "admin",
  userpassword: "ramshyam"
 },
 {
  address: "",
  loginResult: 1,
  userEmail: "",
  userId: "anuraag",
  userName: "Anuraag",
  userpassword: "kk0903"
 }
]
}

When I use the below jquery code to display the data in a table it populates the table with “undefined”

<script>
$(document).ready(function(){
    //attach a jQuery live event to the button
    $('#submitlogin').live('click', function(){
        $.getJSON('/acc/services/json/security/loginresult.json', function(data) {
            //alert(data); //uncomment this for debug
            //alert (data.item1+" "+data.item2+" "+data.item3); //further debug
            // $('#showdata').html("<p>Result="+data.loginResult+" userid="+data.userId+" username="+data.userName+"</p>");
            $.each(data.secInfo, function(){

                $('#usertable').append(
                            function(this){
                                return "<tr>"+
                                            "<td>"+this.userId+"</td>"+
                                            "<td>"+this.userName+"</td>"+
                                            "<td>"+this.userpassword+"</td>"+
                                            "<td>1</td>"+
                                        "<tr>"; 
                            }
                            );

                })
        });
    });
});
</script>

I am new to jquery and got some idea from http://forum.jquery.com/topic/jquery-create-table-from-json-data this post.

Please help me out

Answer 1

this definitely works

<script>
$(document).ready(function(){
    //attach a jQuery live event to the button
    $('#submitlogin').live('click', function(){
        $.getJSON('/acc/services/json/security/loginresult.json', function(data) {

     var genericlist =  eval('(' + data+ ')');

var table = document.getElementById("usertable");
var tabledata = "";

for(i=0;i<genericlist.secInfo.length;i++){

tabledata += "<tr>";
tabledata += "<td>" + genericlist.secInfo[i].useID += "</td>";
tabledata += "<td>" + genericlist.secInfo[i].useName += "</td>";
tabledata += "<td>" + genericlist.secInfo[i].usePassword += "</td>";
tabledata += "</tr>";

}

table.innerHTML = tabledata;