AngularJs ng-repeat orderBy not working for nested object properties

Question

I, m tries to ng-repeat the nested properties of an object and arrange them, but ordering does not work for me.

I saw this: How to order in AngularJS using the Nested property

but the json structure is different and I could not get it to work.

Plunker

My code is:

<div ng-repeat="item in data | orderBy:order.allListPosition"> <div>{{item.name}} - {{item.order}}</div> </div> 

Scope:

  $scope.data = { "78962": { "id": "78962", "name": "item 2", "type": "blind", "order": { "allListPosition": "008", "catListPosition": "059" }, "data": { "status": "stop", "percent": 20 }, "longPress": { "item": "78966", "active": true } }, "78963": { "id": "78963", "name": "item 3", "type": "coolmaster", "order": { "allListPosition": "053", "catListPosition": "001" }, "data": { "status": 1, "temp": 16, "point": 25, "mode": "cool", "fan": 3 }, "longPress": { "item": "78966", "active": false } } }; 

Can someone show me what I'm doing wrong?

Thank you very much

Avi

Answer 1

There are two reasons why orderBy does not work here:

• orderBy only works with arrays, but you apply it to a simple object.
• To order by expression, you must give orderBy string value with the expression. You give it order.allListPosition , which will be equal to $scope.order.allListPosition (which does not exist).

To solve the first problem, add an array of your data objects:

 $scope.dataArray = Object.keys($scope.data) .map(function(key) { return $scope.data[key]; }); 

To solve the second problem (and enable dataArray from above):

 <div ng-repeat="item in dataArray | orderBy:'order.allListPosition'"> 

http://plnkr.co/edit/BXgYPTElSM3sjvLg30CL?p=preview

Answer 2

You can create a custom filter to sort by unlabeled properties.

 myApp.filter('customorder', function() { return function(items) { items.sort(function(a,b){ // Make sure we are comparing integers var aPos = parseInt(a.order.allListPosition); var bPos = parseInt(b.order.allListPosition); // Do our custom test if (aPos > bPos ) return 1; if (aPos < bPos) return -1; return 0; }) } }); 

Your html will look like

 <div ng-repeat="item in data | customorder"> <div>{{item.name}} - {{item.order}}</div> </div> 

You should always think that angular is not a restrictive language. the filters you usually use are built into the filters . But you can have fun with your filter as soon as you want!

Answer 3

Your data object is an object of objects, not an array of objects.

Therefore, orderBy will not work, since it is only compatible with arrays.

I updated your data object to make it work:

 $scope.data = [ { "id": "78961", "name": "item 1", "type": "blind", "order":{allListPosition:"093",catListPosition: "009"}, "data": { "status": "up", "percent": 80 }, "longPress": { "item": "78966", "active": true } }, { "id": "78962", "name": "item 2", "type": "blind", "order":{allListPosition:"008",catListPosition: "059"}, "data": { "status": "stop", "percent": 20 }, "longPress": { "item": "78966", "active": true } }, { "id": "78963", "name": "item 3", "type": "coolmaster", "order":{allListPosition:"053",catListPosition: "001"}, "data": { "status": 1, "temp": 16, "point": 25, "mode": "cool", "fan": 3 }, "longPress": { "item": "78966", "active": false } }]; 

And in HTML:

 <div ng-repeat="item in data | orderBy:'order.allListPosition'"> <div>{{item.name}} - {{item.order}}</div> </div> 

Plunker

Answer 4

I am sure this should be:

<div ng-repeat="item in dataArray | orderBy:'item.order.allListPosition'">