jquery - Binding Json data to a table in mvc 4

Question

I am working in an mvc 4 application..I want to bind a json data to a table in my application using jquery.I am able to convert a dataset (for which i get data from database) to json data using a method and get the json data.But i dont know how to bind it to a table using jquery.Please tell me 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 return json string to a json object:

data = $.parseJSON(data);

Then, iterate through it and create your table. The complete solution is like the following:

$('#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.
        });                
    });

});