CODEWITHSUNDEEP
javascriptangularjs
Keirathi
Keirathi

Reputation: 397

How to refactor this table of objects to be sorted?

Here's the basics of what is currently written:

$scope.data = {};
var data = $http.get(array of objects from server);
for (var i = 0; i<data.length; i++) {
  $scope.data[data[i]._id] = data[i];
}

then I'm building a table of the data like so:

<table>
    <tr>
        <th>Time</th>
        <th>Activity</th>
        <th>Location</th>
        <th>Customer</th>
        <th>Completed</th>
    </tr>
    <tr ng-repeat="item in data">
        <td>{{ data.timestamp }}</td>
        <td>{{ data.activity }}</td>
        <td>{{ data.location }}</td>
        <td>{{ data.customer }}</td>
        <td><button ng-click="completeAction(data._id)">Complete</button></td>
    </tr>
</table>

And then in completeAction it POSTS to the server that the id has been completed, and when it gets a 200 status back from the post it does:

delete $scope.data[id];

This all works fine, but I wanted to be able to sort the data in the table a specific way; first by Activity, then by Time. I found a code snippet from https://github.com/Teun/thenBy.js that let's me sort the data array from the server just fine, but obviously that doesn't work for the $scope.data since it's an object rather than array.

So I tried converting $scope.data into an array and doing something like this:

$scope.data = [];
var data = $http.get(array of objects from server);
var s = firstBy("activity")
        .thenBy("time");
data.sort(s);
for (var i = 0; i<data.length; i++) {
  var found = false;
  for (var j = 0; j<$scope.data.length; j++) {
    if ($scope.data[j]._id == data[i]._id)
      found = true;
  }
  if (!found) 
    $scope.data.push(data[i]);
}

This works too. My table is sorted the way I want it now. The problem then becomes that I don't know how to delete things from the $scope when I push the button. Since earlier I could just access the object to delete it by id, I'm not sure the best way to go about it now. Plus I feel like there's bound to be a better way to do all of what I've done so far. I'm just not much of a javascript developer :P

Hope I explained what I mean well enough. If not, just let me know and I can try to be more specific. Thanks for any help!

edit to answer question:

function completeAction(id) {
  $http.post(post to server with item id saying that it has been completed)
       .then(function(response) {
          if (response.status == 200) {
             delete $scope.data[id];
          }
       })
}

Upvotes: 0

Views: 43

Answers (1)

Pankaj Parkar
Pankaj Parkar

Reputation: 136174

You could do the same sorting filtering by using angular orderBy filter to which you can pass string or array of string by which you wanted to sort an collection. Also use as filteredData after filtering where filterData will have all sorted collection of object. That you could access inside your controller by doing $scope.filteredData.

<tr ng-repeat="item in data | orderBy: ['activity', 'time'] as filteredData">

Be aware that, on larger collection using view level filter can affect performance. I'd say that try to use it inside controller it collection is larger like $filter('orderBy')($scope.data, ['activity', 'time'])

Update

Its always to better to keep data update on view. I would say rather than handling a collection state on client side, you should make an another ajax call right after completing an action so that data consistency of application will be maintained.

Upvotes: 1

Related Questions