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.

Yasmeen · Accepted Answer · 2016-03-18T06:10:02.470

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>

score 0 · Answer 2 · answered Sep 10 '15 at 07:24

0

Why it is not working i don't know but yo can solve it by doing like below

repeat your response & create a new object & push it into an array..

var res = [];
for(var i=0; i<response.length; i++) {
    var x = {"id":response[i].id, "project":response[i].project};
    arr[i] = angular.copy(x);
}

answered Sep 10 '15 at 07:24

Manikanta Reddy

849
9
23

Yes but in that response we are removing $$hashkey – Manikanta Reddy Sep 10 '15 at 07:25
I dont know why this happend. But same problem happend for me also. – Manikanta Reddy Sep 10 '15 at 07:27
ok. The thing is for removing the $$hashkey from every row now i have to iterate this reponse for so many time.Is this advisable? – Yasmeen Sep 10 '15 at 07:28
If you found any other solution just drop the url of it. it ll help me to learn also – Manikanta Reddy Sep 10 '15 at 07:38
I have posted the solution see whether it helps you too. – Yasmeen Sep 11 '15 at 09:23

Angularjs Smart table not working for Dynamic data

2 Answers2