0

I am attempting to populate a table using an array in a property of my returned JSON using Bootstrap Table.

The data is structured like this :

{
  "table":[
    {
      "entry_page_type": "Home",
      "operating_system": "Mac",
      "conversion_rate": 0.55
    },
    {
      "entry_page_type": "Collection",
      "operating_system": "Mac",
      "conversion_rate": 0.21
    },
    ...
  ]
}

So far I have tried to flatten the JSON using the technique mentioned in this answer like this (JSON.flatten is defined externally):

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

<table id="data-table" class="table table-striped" data-url="data/conversion-rate.json" data-toggle="table" data-response-handler="responseHandler">
  <thead>
  <tr>
    <th data-field="table.entry_page_type" data-sortable="true">Entry Page</th>
    <th data-field="table.operating_system" data-sortable="true">OS</th>
    <th data-field="table.conversion_rate" data-sortable="true">Conversion Rate</th>
  </tr>
  </thead>
</table>

The table is showing "-" in every cell. What would I have to change to be able to retrieve the table property as I would normal data? Should I manually retrieve the table array beforehand and load that as the data source?

Community
  • 1
  • 1
smketterer
  • 3
  • 2
  • 4

1 Answers1

0

You just need to update responseHandler to:

responseHandler: function (res) {
    return res.table;
}

There is an example: http://issues.wenzhixin.net.cn/bootstrap-table/#issues/353.html.

wenyi
  • 1,384
  • 8
  • 11