Order by Object key in ng-repeat

Question

How can I order by key as integer?

I have the following Object;

 $scope.data = {
    "0": { data: "ZERO" },
    "1": { data: "ONE" },
    "2": { data: "TWO"  },
    "3": { data: "TREE" },
    "5": { data: "FIVE" },
    "6": { data: "SIX" },
    "10":{ data:  "TEN" },
    "11": { data: "ELEVEN" },
    "12": { data: "TWELVE" },
    "13": { data: "THIRTEEN" },
    "20": { data: "TWENTY"}
 }

HTML:

<div ng-repeat="(key,value) in data">

The current output order is 1,10,11,12,13,14,2,20,3,4,5,6

But I want 1,2,3,4,5,6,10,11,12,13,14,20

| orderBy:key

don't work for me.

Any ideas?

Thanks!

You can't - the `orderBy` directive within `ng-repeat` only applies to arrays. — tymeJV, Oct 20 '14 at 21:07
hmm... you might be able to with a filter that converts it to an array of objects each with two properties, `key: 'the keyname', value: ` but you'll of course then have to change your template to match that structure. — Kevin B, Oct 20 '14 at 21:12

score 23 · Accepted Answer · edited Jun 20 '20 at 09:12

An option would be use an intermediate filter.

PLUNK AND Code Snippet

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

app.controller('MainCtrl', function($scope) {
  
  $scope.template = {
    "0": { data: "ZERO" },
    "1": { data: "ONE" },
    "2": { data: "TWO"  },
    "3": { data: "TREE" },
    "5": { data: "FIVE" },
    "6": { data: "SIX" },
    "10":{ data:  "TEN" },
    "11": { data: "ELEVEN" },
    "12": { data: "TWELVE" },
    "13": { data: "THIRTEEN" },
    "20": { data: "TWENTY"}
  }
 
});

app.filter('toArray', function() { return function(obj) {
    if (!(obj instanceof Object)) return obj;
    return _.map(obj, function(val, key) {
        return Object.defineProperty(val, '$key', {__proto__: null, value: key});
    });
}});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore.js"></script>

<body ng-app="app" ng-controller="MainCtrl">
    <div ng-repeat="(key, value) in template| toArray | orderBy:key">{{key}} : {{value.$key}} : {{value.data}}</div>
<body>

NOTE:

The above filter requires Underscore.js, if you don't use it, can rewrite the filter.

Bower packaged version of this filter: https://github.com/petebacondarwin/angular-toArrayFilter — James Gentes, Dec 10 '15 at 20:58

score 2 · Answer 2 · edited Dec 10 '15 at 21:46

2

I think it sorts itself out with a conversion to an array. pun intended.

var obj = {"3": {three:3}, 2: {two:2}, "5": {five:5}, 4: {four:4}, 
  1: {one:1}, 6: {six:6}, 10: {ten:10}, 11:{eleven:11} 
} 

$scope.arr = [];

for (var o in obj)
   $scope.arr.push(obj[o])

edited Dec 10 '15 at 21:46

James Gentes

7,528
7
44
64

answered Oct 20 '14 at 22:40

Dylan

4,703
1
20
23

FYI this punker is dead. – Chris Brown Oct 28 '15 at 13:48
1

This relies on the property iteration order of the "obj" object, which is not guaranteed, see https://stackoverflow.com/questions/5525795/does-javascript-guarantee-object-property-order – Rich Feb 01 '18 at 15:23

score 0 · Answer 3 · answered Mar 01 '17 at 06:55

app.filter('orderObjectBy', [function()  {
  return (filterObj, prop) => {

    let arr = []
   //below is the loadash function you can use for in also
   _.forEach(filterObj, function(value, key)  {
   arr.push({
   key: key,
    value: value
     });
  });

let sortedArr = _.sortBy(arr, val => val.value[prop]);

  for (let variableKey in filterObj) {
 if (filterObj.hasOwnProperty(variableKey)) {
  delete filterObj[variableKey];
    }
   }

  for (let data of sortedArr) {
 filterObj[data.key] = data.value;
 }


  return filterObj;

   }
 }])

Order by Object key in ng-repeat

3 Answers3

PLUNK AND Code Snippet

NOTE:

Linked

Related