Bootstrap tables - how to access inner elements in the data source object

Question

Let's say my data source object looks something like this:

[{
   "id": 123,
   "name": "blabla1",
   "kids": {
      "id": "kid1",
      "name": "kk1"
   }
},{
   "id": 456,
   "name": "blabla2",
   "kids": {
      "id": "kid2",
      "name": "kk2"
   }
}]

This is a list (array) containing 2 objects, with the "kids" key in each, holding an inner object with keys and so on.

When working with Bootstrap Tables, each column is connected to a key in the source object, for example:

<th data-field="id">ID</th>

The question here is how can I define a column to be connected to an inner key in the source object??

I've tried the following thing (suited for the example data above):

<th data-field="kids.id">Inner ID</th>

And it doesn't work. :(

P.S:

I know that I can format each column's data by implementing the designated "data-formatter" attribute, but I prefer to find a more direct and faster way to accomplish what I need in this case.

score 6 · Answer 1 · edited May 23 '17 at 12:16

This Bootstrap plugin bootstrap-table does not offer the mechanism to do this at the moment. You should raise an issue on their github site to request this.

Instead, you will have to flatten the JSON every time in the plugin's response handler before loading it into the table. Using the code to flatten JSON from the accepted answer to this question: Fastest way to flatten / un-flatten nested JSON objects, you can create a responseHandler as follows:

<script>
    function responseHandler(res) {
        var flatArray = [];
        $.each(res, function(i, element) { 
            flatArray.push(JSON.flatten(element));
        });
        return flatArray;
    }
</script>

And then add the response handler to your table using the attribute data-response-handler="responseHandler":

<table data-url="data.json" data-toggle="table" data-height="299"  data-response-handler="responseHandler">
    <thead>
    <tr>
        <th data-field="id">ID</th>
        <th data-field="name">Name</th>
        <th data-field="kids.id">Kids Id</th>
        <th data-field="kids.name">Kids Name</th>
    </tr>
    </thead>
</table>

Plunker example here

score 2 · Answer 2 · edited Jun 16 '15 at 05:12

How to access inner elements in the data source object of a table

When a table attached to a link which provides the JSON data, the bootstrap table automatically populates it.

If anyone wants to access the table populated data, (i.e. which is in JSON format) it is simple to do the following.

Step 1: Add data-response-handler="responseHandler" to the HTML table attribute.

Step 2: Write the function as follows:

function responseHandler(res) 
{
  var str = JSON.stringify(res, undefined, 2);
  $(document.body).append(str); //this print the whole json data to your page body
  alert(res[0].empno); //this is however a single value of the jason data.
}

<table id="emp_ltc_approved_list_table" data-toggle="table" data-method="post" data-url="getallemployeeapprovedlist.htm" data-response-handler="responseHandler" class="table table-bordered table-condensed table-hover panel-body">
  <thead class="bg-primary">
    <tr>
      <th data-field="empno">Employee Code</th>
      <th data-field="dep_name">Employee Name</th>
      <th data-field="slno">SL NO</th>
    </tr>
  </thead>
</table>

The JSON data is as follows:

[
  {
    "empno": "74271",
    "dep_name": "ARJUN ROUTH",
    "block": "2014-2017", 
    "subblock": "2014-2015", 
    "slno": "6", 
    "journey_type": "LTC", 
    "place_of_visit": "VIZAG", 
    "status": "APPROVED", 
    "application_date": "15-06-2015", 
    "journey_status": "APPROVED" 
  },
  {
    "empno": "92039", 
    "dep_name": "ARINDAM MONDAL", 
    "block": "2014-2017", 
    "subblock": "2014-2015", 
    "slno": "1", 
    "journey_type": "HTC", 
    "place_of_visit": "VIZAG", 
    "status": "APPROVED", 
    "application_date": "12-06-2015", 
    "journey_status": "APPROVED" 
  }
]

Step 3: Within the function responseHandler(res), you can do any operation with the data. Just like how I made an alert.

score 1 · Answer 3 · answered Oct 07 '15 at 06:46

Using responseHandler, I think it does not good to me, because my responded data is very large and every times I reload table, it will parse all my json when I only need some nested fields. I have resolved my problem by using data-formatter, I hope it will help someone.

<th data-field="kids.id" data-formatter="KidsIdFormatter">Inner ID</th>

After added data-formatter attribute. Please add more javascript function:

function KidsIdFormatter(value, row){
//row contains the returned object which applied to current row.
return row.kids.id;
}

score 1 · Answer 4 · answered Dec 28 '16 at 04:38

1

Use data-formatter. This worked for me

function showDescription(cell, row) {
  return cell.id;
}

<th data-field="kids" data-formatter="KidsIdFormatter">Inner ID</th>

answered Dec 28 '16 at 04:38

naamadheya

1,902
5
21
28

score -1 · Answer 5 · answered Aug 08 '17 at 08:31

Try to access inner element like this: kids.name it's worked for me; Your DataTable dichiaration should be like this:

 $('#data-table').DataTable( {
    ...
    columns: [
        { data: "kids.id" },
        { data: "kids.name" },
        { data: "name" }
        ...
    ],
    ...
} );

check DataTable docs: https://editor.datatables.net/examples/advanced/deepObjects.html

Bootstrap tables - how to access inner elements in the data source object

5 Answers5

Linked