Angularjs Smart table not working for Dynamic data

Question

I have a situation where i am using angularJs smart table for filtering.

html:

<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 am testing for 2 different cases.

In my controller first i call the same function but send dummy array and in the second case i send the array received from the 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 using a service and fetching data through 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 i am using case1 the sorting works fine. But when i use case2 the sorting does not work. Onclick of it the data just disappears. I tried debugging to see whether the listAllWorkOrderData function is being called again when we click on the filter.But it is just called once when the page is loaded to populate the table.So that means the data is present in the listWorkOrderResponse. Then why is it not sorting?

I checked the response for both the situation by printing them the only difference i found was that the listWorkOrderResponse which comes from the api call has a $$hashKey: "object:363" added to it.

Can anyone point me what mistake i am doing.

Answer 1

I was able to resolve this issue by using stSafeSrc attribute

In the controller we add

    $scope.listAllWorkOrderData = function () {
                TestService.listAllWorkOrderData().then(function (response, status, headers, config) {
                    if (response != undefined && response != null) {
                        if (!$scope.listWorkOrderResponse) {
                            $scope.listWorkOrderResponse = [];
                        }
                        $scope.listWorkOrderResponse = response;
                        // we add one more list.
                        $scope.displayedWOList = [].concat($scope.listWorkOrderResponse);
 }, function (response, status, headers, config) {
                    console.log(response);
                });

and then in the html table we add the stSafeSrc attribute.

stSafeSrc attribute from the Smart Table document http://lorenzofox3.github.io/smart-table-website/

stSafeSrc attribute

If you are bringing in data asynchronously (from a remote database, restful endpoint, ajax call, etc) you must use the stSafeSrc attribute. You must use a seperate collection for both the base and safe collections or you may end up with an infinite loop.

<section class="main" ng-init="listAllWorkOrderData()">
        <table st-table="displayedWOList" st-safe-src="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 displayedWOList">
                 <tr>
                    <td>{{workOrder.id}}</td>
                    <td>{{workOrder.project}}</td>
                 </tr>
                 <tr>
                    <td></td>
                 </tr>
         </tbody>
        </table>
    </section>