Currently, I am facing a scenario where I am utilizing angularJs smart table for filtering.
Here is the HTML code:
<section class="main" ng-init="listAllWorkOrderData()">
<table st-table="listWorkOrderResponse">
<thead>
<tr>
<th st-sort="id">ID <i></i></th>
<th st-sort="project">Project <i></i></th>
</tr>
</thead>
<tbody ng-repeat="workOrder in listWorkOrderResponse">
<tr>
<td>{{workOrder.id}}</td>
<td>{{workOrder.project}}</td>
</tr>
<tr>
<td></td>
</tr>
</tbody>
</table>
</section>
I have two test cases that I am examining.
Initially, in my controller, I invoke the same function by sending a dummy array, and in the subsequent case, I send the array received from an API call.
1. Dummy data
$scope.listAllWorkOrderData = function () {
var listWorkOrderResponse = [{"id":"1","project":"project1"},{"id":2,"project":"project2"},{"id":"3","project":"project3"}];
}
2. I am utilizing a service to fetch data via API.
$scope.listAllWorkOrderData = function () {
TestService.listAllWorkOrderData().then(function (response, status, headers, config) {
if (response != undefined && response != null) {
if (!$scope.listWorkOrderResponse) {
$scope.listWorkOrderResponse = [];
}
$scope.listWorkOrderResponse = response;
}, function (response, status, headers, config) {
console.log(response);
});
When using the first case, sorting works as expected. However, when moving to the second case, the sorting feature malfunctions. Upon clicking on it, the data simply disappears. I attempted debugging to determine if the listAllWorkOrderData() function gets called again upon filter click. Surprisingly, it only gets executed once when the page loads to populate the table. Hence, the data exists in listWorkOrderResponse. So, why isn't it sorting properly?
After examining the responses in both scenarios by printing them out, the sole distinction found was that the listWorkOrderResponse obtained from the API call has a $$hashKey: "object:363" appended to it.
Could someone please guide me on what error I might be committing here?