Bootstrap Table GET JSON Data - ruby-on-rails

Question

So I am trying to make bootstrap table with search and sorting with the data coming from a GET calll
<table id="example" class="table table-bordered table-striped table-hover" data-search="true">
<thead>
<tr class="text-white clickable-row" bgcolor="#578ebe" >
<th id="white-text"> # </th>
<th id="white-text"> Name </th>
<th id="white-text"> DBA </th>
<th id="white-text"> Facility ID </th>
<th id="white-text"> Active </th>
</tr>
</thead>
<tbody>
<tr ng-repeat="hospital in hospital_filtered = hospitals">
<td> <a ng-click="click(hospital)"> {{ hospital.hospital_id }} </td>
<td> <a ng-click="click(hospital)"> {{ hospital.hospital_name }} </td>
<td> <a ng-click="click(hospital)"> {{ hospital.hospital_dba }} </td>
<td> <a ng-click="click(hospital)"> {{ hospital.facility_id }} </td>
<td> <a ng-click="click(hospital)"> {{ hospital.active_flag }} </td>
</tr>
</tbody>
</table>
Here is where I make the GET call from my API. The data is coming in, but the bootstrap table sorting and sort are not working. How do I populate bootstrap table with this call?
$http.get("/hospitals/all", {
params: {authtoken: $rootScope.auth_token}}
)
.then(function(response) {
// Request completed successfully
//console.log(response);
$scope.hospitals=response.data
}, function(x) {
// Request error
console.log("Error");
});
});

Answer 1

You're correctly fetching the data, but the iteration is wrong.
HTML:
<input ng-model="searchKeyword" type="text">
<table id="example" class="table table-bordered table-striped table-hover" data-search="true">
<thead>
<tr class="text-white clickable-row" bgcolor="#578ebe" >
<th id="white-text" ng-click="changeSort('hospital_id')"> # </th>
<th id="white-text" ng-click="changeSort('hospital_name')"> Name </th>
<th id="white-text" ng-click="changeSort('hospital_dba')"> DBA </th>
<th id="white-text" ng-click="changeSort('facility_id')"> Facility ID </th>
<th id="white-text" ng-click="changeSort('active_flag')"> Active </th>
</tr>
</thead>
<tbody>
<tr ng-repeat="hospital in hospitals | filter: searchKeyword | orderBy: orderKeyword">
<td> <a ng-click="click(hospital)"> {{ hospital.hospital_id }} </td>
<td> <a ng-click="click(hospital)"> {{ hospital.hospital_name }} </td>
<td> <a ng-click="click(hospital)"> {{ hospital.hospital_dba }} </td>
<td> <a ng-click="click(hospital)"> {{ hospital.facility_id }} </td>
<td> <a ng-click="click(hospital)"> {{ hospital.active_flag }} </td>
</tr>
</tbody>
</table>
The Javascript part:
$scope.orderKeyword = 'hospital_name';
$scope.changeSort = function(sortAttr) {
$scope.orderKeyword = sortAttr;
};
filter: searchKeyword will use the keyword typed into the additional input-field. This way you can basically "search" the table. The results that are left will then be ordered by (orderBy) the attribute-name that's stored inside $scope.orderKeyword. I initialized it with hospital_name.
You may add additional logic like how strict the filtering and which direction the sorting is supposed to be.
Here's the documentation for the two filters in question:
https://docs.angularjs.org/api/ng/filter/orderBy
https://docs.angularjs.org/api/ng/filter/filter