Bootstrap Datatables JSON class parsing

Question

I have problems with the bootstrap datatable plugin My class looks something like this:

Model

public class Class1 {
  public string EmployeeID { get; set; }
  public string FirstName { get; set; }
  public Position Position { get; set; }

  public Class1 GetEmployees()
 {
  return this;
 }
}

public class Position {
  public string PositionID { get; set; }
  public string PositionName { get; set; }
//Other functions below
}

Controller

public JsonResult GetEmployees()
{
 return Json(new Class1().GetEmployees(), JsonRequestBehavior.AllowGet);
}

HTML

   <table id="tblLeaveCredits"
    data-url="/Employees/GetEmployees" 
    data-toggle="table" 
    data-search="true"
    data-click-to-select="true"
    data-select-item-name="rdoSelectedItem"
    data-cache="false">
     <thead>
      <tr>
       <th data-field="state" data-radio="true"></th>
       <th data-field="FirstName" data-sortable="true">Description</th>
       <th data-field="Position.PositionName" data-sortable="true">Available</th>
      </tr>
     </thead>
   </table>

My question is, how can i get the data of the Position class from the Json return and display it as field in the datatable?

On the [bootstrap page](http://getbootstrap.com/components/) i could not find a datatable. Are you using a plugin and could you link to it? — surfmuggle, May 15 '15 at 06:22
Hi! I'm using bootstrap-table from wenzhixin.net.cn. Here's the link http://bootstrap-table.wenzhixin.net.cn/ — shan.dye2, May 15 '15 at 06:25
Neither in the [source code](https://github.com/wenzhixin/bootstrap-table/blob/master/src/bootstrap-table.js) nor in the [docs](http://bootstrap-table.wenzhixin.net.cn/documentation/) of [bootstrap-table.wenzhixin.net.cn](http://bootstrap-table.wenzhixin.net.cn/) plugin could i find an option to bind nested json-objects. So you might consider flattening it [server side](http://stackoverflow.com/questions/7394551/c-sharp-flattening-json-structure) or [client side](http://stackoverflow.com/questions/19098797/fastest-way-to-flatten-un-flatten-nested-json-objects). I have not tested either answer. — surfmuggle, May 16 '15 at 21:08

score 2 · Accepted Answer · edited May 23 '17 at 12:14

As stated above it seems that the datatable plugin has no option to bind an array of nested json-objects to the table. So i used the client side approach to flatten the array of nested json-objects to be able to bind it to the data-table. See my demo to bind a nested object to the datatable:

$(function () {
    // apply flattenJson to every item in the array and return a new array
    // using jQuery.map
    flattenedData = jQuery.map( data, function(d){ return flattenJson(d) });
    // bind the now unnested array to the datatable
    $('#table').bootstrapTable({
        data: flattenedData
    });
    console.log(flattenedData);
});

Given this array of nested json objects:

var data = [
    {
        "EmployeeID": "123",
        "FirstName": "Marc",
        "Position": {"PositionID": 1, "PositionName": "Supermarket"}
    },
    {
        "EmployeeID": "456",
        "FirstName": "Scott",
        "Position": {"PositionID": 2, "PositionName": "Googleplex"}
    },
    {
        "EmployeeID": "789",
        "FirstName": "John",
        "Position": {"PositionID": 3, "PositionName": "SanFran"}
    }    
];

To flatten the nested json object i took the code from this answer:

function flattenJson(data) {
    var result = {};
    function recurse (cur, prop) {
        if (Object(cur) !== cur) {
            result[prop] = cur;
        } else if (Array.isArray(cur)) {
             for(var i=0, l=cur.length; i<l; i++)
                 recurse(cur[i], prop + "[" + i + "]");
            if (l == 0)
                result[prop] = [];
        } else {
            var isEmpty = true;
            for (var p in cur) {
                isEmpty = false;
                recurse(cur[p], prop ? prop+"."+p : p);
            }
            if (isEmpty && prop)
                result[prop] = {};
        }
    }
    recurse(data, "");
    return result;
}

To bind the now unnested object you can use this html

<table id="table">
    <thead>
    <tr>
        <th data-field="EmployeeID">ID</th>
        <th data-field="FirstName">Firstname</th>
        <th data-field="Position.PositionID">PositionID</th>        
        <th data-field="Position.PositionName">PositionName</th>        
    </tr>
    </thead>
</table>

That is it see the fully working demo to bind a nested object to the datatable

Bootstrap Datatables JSON class parsing

Model

Controller

HTML

1 Answers1