orderBy should work for ngRepeat over objects too

[andrewrk]

http://jsfiddle.net/m7ynD/

The dates are not sorted, but they should be.

[btford]

I'm not convinced that you should be able to sort objects with a filter; if the order of some collection of models is important, it seems like you would want to use an array, or augment your model with an array with references to the items in the collection. Can you provide some real-world example of why this would be desirable?

[andrewrk]

Here's the real world example. My model is a bunch of jobs to process. A job looks like this:

Job model
{
    state: // one of ['queued', 'processing', 'complete']
    type: // one of ['audio', 'image']
    id: // some unique string
    queue_date: // date that the job was queued
}

jobs_by_id model
{
    <job id>: <job>
}

jobs_by_category model
{
    queued: {
        audio: {
            <job id>: <job>
        }
        image: {
            <job id>: <job>
        }
    }
    processing: {
        audio: {
            <job id>: <job>
        }
        image: {
            <job id>: <job>
        }
    }
    complete: {
        audio: {
            <job id>: <job>
        }
        image: {
            <job id>: <job>
        }
    }

The view looks something like this:

<h2>Jobs</h2>
<h3>Queued</h3>
<div job-table="queued"></div>
<h3>Processing</h3>
<div job-table="processing"></div>
<h3>Complete</h3>
<div job-table="complete"></div>

The job-table directive looks like this:

main.directive('jobTable', function(){
  return {
    templateUrl: '/views/job-table.html',
    scope: true,
    link: function(scope, element, attrs){
      scope.state = attrs.jobTable;
      scope.state_jobs = scope.jobs_by_category[scope.state];
    }
  };
});

The job-table.html view looks something like this:

<h4>audio</h4>
<table>
    <tr>
        <th>date job was queued</th>
        (a bunch more <th>'s related to audio)
    </tr>
    <tr ng-repeat="job in state_jobs.audio">
        <td>{{job.queue_date}}</td>
        (a bunch more <td>'s related to audio)
    </tr>
</table>
<h4>image</h4>
<table>
    <tr>
        <th>date job was queued</th>
        (a bunch more <th>'s related to image)
    </tr>
    <tr ng-repeat="job in state_jobs.image">
        <td>{{job.queue_date}}</td>
        (a bunch more <td>'s related to image)
    </tr>
</table>

I need the job <tr>s to be sorted by job.queue_date. You may say that I should
use arrays instead of objects for jobs_by_category, but I need the data
structure to be the way it is for inserting and deleting jobs to make sense.
Here's what the insert/delete job code looks like:

function insertJobIntoCat(job){
  var ref$, key$;
  ((ref$ = $scope.jobs_by_cat[job.state])[key$ = job.type] || (ref$[key$] = {}))[job.id] = job;
}
function newJob(job){
  jobs_by_id[job.id] = job;
  insertJobIntoCat(job);
}
function updateJob(job){
  var old_job, ref$, key$;
  old_job = jobs_by_id[job.id];
  if (old_job.state === job.state && old_job.type === job.type) {
    import$(old_job, job);
  } else {
    delete ((ref$ = $scope.jobs_by_cat[old_job.state])[key$ = old_job.type] || (ref$[key$] = {}))[old_job.id];
    insertJobIntoCat(import$(old_job, job));
  }
}
function import$(obj, src){
  var own = {}.hasOwnProperty;
  for (var key in src) if (own.call(src, key)) obj[key] = src[key];
  return obj;
}

So as you can see, if I wanted to switch to using an array in the
jobs_by_category model, I would have to give up O(1) insertion and
deletion of jobs and settle with O(n). Even though the performance of
this particular thing isn't an issue, it's the principle of the matter.

The orderBy filter should be able to sort objects. It would not confuse the
current syntax, and it would solve this perfectly valid problem that I am
having.

[Primusio]

I would also appreciate this feature.

[btford]

@superjoe30, thanks for the extensive example! I've been busy the past week, but I'm still looking over this and thinking about it. I like the semantics, but implementation would be complicated, and I think it's more semantic to use an array when order matters.

Complexity analysis for this isn't as straightforward as what you've suggested; although you can look at the insertions/deletions in isolation, the reality of the situation is that you also have to do dirty checking and updating of the DOM based on the changing data structure, and those operations are likely to be much more expensive, perhaps to the extent that O(N) insertion/deletion is negligible. We'd need to benchmark this to get a real answer.

[seamusmalone]

I third the request. Its really inefficient and risks denormalization to shift objects into arrays just to sort them in some view

[brev]

Made a few small changes to the orderByFilter code to allow objects, instead of just arrays:

https://gist.github.com/3949705

[tmaiaroto]

Me too...I simply render JSON after a database query from MongoDB. That returns objects. Even if it didn't, the classes within the framework I'm using returns objects when converting to JSON because the document or record class is managing the data model. In many, many cases this will be true across other web applications and APIs.

I really think this is a deficiency with JSON "objects" that can be resolved by Angular. Ensuring these objects are processed in the "proper" order has always been an issue. So people make methods just for this purpose or output two hacky arrays sometimes or just always output arrays in general. It's very convenient to use JSON objects. I don't know, blame the JSON spec for how we got here...But we're here.

[BernhardPosselt]

Very interested in this, already added this in my version. Could somebody add this?

[sssilver]

+1

[sitamet]

+1

[Yukilas]

+1

[aaronshaf]

+1

[andrewrk]

The real world example I gave above is now open source.

[klebba]

+1

[brotherdetjr]

+1