How to orderby in AngularJS using Nested property

Question

This is the json that is generated using PHP

[{"Sale":{"id":"1","customer_id":"1","amount":"15","created":"2014-05-17"}}]

Doing orderBy:id is obviously not working. I read in other posts that an orderBy function needs to be created for this kind of data structure. I am not able to create the function. Can anyone please tell me what is the correct way to approach this?

Answer 1

Suppose you have:

$scope.sales = [{"Sale":{"id":"1"}},{"Sale":{"id":"2"}},{"Sale":{"id":"3"}}];

Why not just do following:

<div ng-repeat="sale in sales | orderBy:'Sale.id':true">
    {{ sale.Sale.id }}
</div>

It works well with my case. May be Angular did not support it at the time you asked the question.

Answer 2

These type of data manipulations I like to keep them in the proper angular objects and for that reason I would create my custom filter, something like:

var sampleSource=  [{"Sale":{"id":"8","customer_id":"1","amount":"15","created":"2014-05-17"}}, {"Sale":{"id":"5","customer_id":"6","amount":"15","created":"2015-05-17"}}];

var myApp = angular.module('myApp',[]);

myApp.filter('myFilter', function() {
 return function(items) {  
    items.sort(function(a,b){   
        if (parseInt(a.Sale.id) > parseInt(b.Sale.id))
            return 1;
        if (parseInt(a.Sale.id) < parseInt(b.Sale.id))
            return -1;         
        return 0; })
});

Important: I recommend the custom filter because as personal preference I do not like to overload my controllers or other objects with tasks(code) that I can separate on other objects which gives me more independence and cleaner code(one of the things I love about angular) but besides this personal preference I would say that this is not the only way but if you share my reasons behind it I hope it helps.