Json data binding to table in mvc 4

Question

I am working in mvc 4 application. I want to connect json data to a table in my application using jquery.I can convert the data set (for which I get data from the database) to json data using the method and get json data.But I don't know how to associate it with a table using jquery. Please tell me a way to solve this problem.

JSon data :

My json data is something like this.

[{"Location":"Chennai","Duration":"15","Sno":"1", "Date of Birth":"\/Date(-2209051800000)\/","Dateofjoin":"\/Date(-2209048200000)\/"}] 

Jquery

 $('#btnGoNew').click(function () { var url = '@Url.Content("~/Somecontroller/GetValue")'; $.getJSON(url, { id: valz }, function (data) { //code to bind table }); }); 

View

  <input type="button" class="MasterButton" id="btnGoNew"/> <table id="grd1"> <thead> <tr> <th>Location</th> <th>Duration</th> <th>Sno</th> <th>Date of Birth</th> <th>Dateofjoin</th> </tr> </thead> <tbody> <tr> <td></td> </tr> </tbody> </table> 

controller

  public JsonResult GetValue(string id) { JsonResult json = new JsonResult(); DataSet ds = LoadDoctordetailsNew(id); /*LoadDoctordetailsNew is method where i get data from database and convert to dataset.It returns a dataset*/ string returnData = GetJson(ds.Tables[0]); json.JsonRequestBehavior = JsonRequestBehavior.AllowGet; json.Data = returnData; return json; } public static string GetJson(DataTable dt) { System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer(); List<Dictionary<string, object>> rows = new List<Dictionary<string, object>>(); Dictionary<string, object> row = null; foreach (DataRow dr in dt.Rows) { row = new Dictionary<string, object>(); foreach (DataColumn col in dt.Columns) { row.Add(col.ColumnName, dr[col]); } rows.Add(row); } return serializer.Serialize(rows); } 

Answer 1

First, you should parse the json returned string for json object :

 data = $.parseJSON(data); 

Then swipe through it and create a table. The complete solution is as follows:

 $('#btnGoNew').click(function () { var url = '@Url.Content("~/DoctorDetail/GetValue")'; $.getJSON(url, { id: valz }, function (data) { data = $.parseJSON(data); //code to bind table $.each(data, function(i, item) { var html = "<tr><td>" + item.Location + "</td>"; html += "<td>" + item.Duration + "</td>"; // and html += other fields... $("#grd1 tr:last").after(html); // the above line is like that because you use <tbody> // in table definition. }); }); }); 

Answer 2

I guess you can't directly bind json to html table

You need to use any jquery plugins like

Jqgrid

Datatables

Or you can write your own plugins. Or you need to generate an html table from json.