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-18 06:10:02Z

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>

Manikanta Reddy · Accepted Answer · 2015-09-10 07:24:00Z

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, 2015 at 7:24

Manikanta Reddy

8579 silver badges24 bronze badges

5 Comments

Manikanta Reddy Over a year ago

Yes but in that response we are removing $$hashkey

Manikanta Reddy Over a year ago

I dont know why this happend. But same problem happend for me also.

Yasmeen Over a year ago

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?

Manikanta Reddy Over a year ago

If you found any other solution just drop the url of it. it ll help me to learn also

Yasmeen Over a year ago

I have posted the solution see whether it helps you too.

Collectives™ on Stack Overflow

Angularjs Smart table not working for Dynamic data

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related