Keirathi Keirathi - 1 year ago 87
Javascript Question

How to refactor this table of objects to be sorted?

Here's the basics of what is currently written:

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

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

<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>

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 $[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 that let's me sort the data array from the server just fine, but obviously that doesn't work for the $ since it's an object rather than array.

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

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

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) {
$ to server with item id saying that it has been completed)
.then(function(response) {
if (response.status == 200) {
delete $[id];

Answer Source

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')($, ['activity', 'time'])


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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download