Tuesday 3 September 2013

Display JSON data direct to table formate

I had found a lot but not find appropriate solution. But now i have done such good thing.
Here you can load your JSON data to table .

For that In HTML

  <div id="example">
    </div>

For Style

 td,th
        {
            padding: 3px;border:1px solid #dedede;
        }

For Script

 var Data = '[{ "User_Code": "abenns1", "First_Name": "Aaron", "Last_Name": "Benns", "Is_Supervisor": 0 }, { "User_Code": "ahansen3", "First_Name": "Alan", "Last_Name": "Hansen", "Is_Supervisor": 1 }, { "User_Code": "ADamasc", "First_Name": "Armel", "Last_Name": "Damasco", "Is_Supervisor": 0 }, { "User_Code": "cjohnso267", "First_Name": "Cliff", "Last_Name": "Johnson", "Is_Supervisor": 0 }, { "User_Code": "dkane", "First_Name": "Donald", "Last_Name": "Kane", "Is_Supervisor": 0 }, { "User_Code": "epangil", "First_Name": "Edgar", "Last_Name": "Pangilinan", "Is_Supervisor": 0 }, { "User_Code": "EBayara", "First_Name": "Enrique", "Last_Name": "Bayaras", "Is_Supervisor": 0 }, { "User_Code": "fcabanl", "First_Name": "Fernando", "Last_Name": "Cabanlig", "Is_Supervisor": 0 }, { "User_Code": "hcabuan1", "First_Name": "Henry", "Last_Name": "Cabuang1", "Is_Supervisor": 1 }, { "User_Code": "ibaaqee", "First_Name": "Ibrahim", "Last_Name": "Baaqee", "Is_Supervisor": 0 }, { "User_Code": "JGangan2", "First_Name": "Jaime", "Last_Name": "Gangano", "Is_Supervisor": 0 }, { "User_Code": "mgaite", "First_Name": "Marcel", "Last_Name": "Gaite", "Is_Supervisor": 0 }, { "User_Code": "mmorris18", "First_Name": "Michael", "Last_Name": "Morris", "Is_Supervisor": 0 }, { "User_Code": "psabido1", "First_Name": "Philip", "Last_Name": "Sabido", "Is_Supervisor": 1 }, { "User_Code": "rcuento", "First_Name": "Reginald", "Last_Name": "Cuento", "Is_Supervisor": 0}]';

  var newdb = JSON.parse(Data);
            //alert(newdb.length);
            $("#example").html("<table>");

            var firstrow = newdb[0];
            $("#example").append("<tr>");
            $.each(firstrow, function (index) {
                $("#example").append("<th>" + index + "</th>");
            });
            $("#example").append("</tr>");


            $.each(newdb, function (index, val) {
                $("#example").append("<tr>");
                $.each(val, function (index) {
                    var code = index;
                    var country = val[index];
                    // $("#example").append("<b>" + code + " : </b>" + country + "&nbsp;&nbsp;");                  
                    $("#example").append("<td>" + country + "</td>");
                });
                $("#example").append("</tr>");
                // $("#example").append("<br/>");

            });
            $("#example").append("</table>");



Here you can give your JSON result to Data.



No comments:

Post a Comment