AngularJS oderBy ob key value map

Question

Is there a way of order a key- value map like this:

<tr data-ng-repeat="(key, value) in vm.carryForwardInformation" data-ng-show="value.value != null && value.value != '00:00'">
            <td><b>{{key | translate}}</b>:</td>
            <td>{{value.value}}</td>
            <td>{{value.startDate}}</td>
            <td>{{value.endDate}}</td>
            <td>{{value.date}}</td>
        </tr>

I have tried the following but it didn't work:

data-ng-repeat="(key, value) in vm.carryForwardInformation | orderBy:key"

Possible duplicate of [Order by Object key in ng-repeat](http://stackoverflow.com/questions/26474920/order-by-object-key-in-ng-repeat) — corn3lius, Mar 21 '17 at 14:43

score 1 · Accepted Answer · edited May 23 '17 at 12:25

You cannot use orderBy filter over an object. It only works over an array. So basically you have two options:

1. Order your object by key inside the controller and iterate over that sorted object (PLUNKER)

CONTROLLLER

var objectUnsorted = {
    "key2":{"id":2,"name":"Lisa","date":"11/11/2016"},
    "key3":{"id":3,"name":"Alice","date":"06/03/2017"},
    "key1": {"id":1,"name":"Christina","date":"17/05/2016"}
};

vm.sortedObject = orderByKey(objectUnsorted);

function orderByKey(data){
    let ordered = {};
    Object.keys(data).sort().forEach(function(key) {
      ordered[key] = data[key];
    });

    return ordered;
}

HTML

<tr ng-repeat="(key, value) in vm.soretdObject">

2. Convert your object to an array and user orderBy filter (PLUNKER)

CONTROLLER

var objectUnsorted = {
    "key2": {"id":2,"name":"Lisa","date":"11/11/2016"},
    "key3": {"id":3,"name":"Alice","date":"06/03/2017"},
    "key1": {"id":1,"name":"Christina","date":"17/05/2016"}
};

vm.dataArray = Object.keys(objectUnsorted).map(function (key) { 
    var obj = objectUnsorted[key];
    obj.key = key;

    return obj; 
});

HTML

<tr ng-repeat="data in vm.dataArray | orderBy:'key'">

** A third option could be do it with a filter (CHECK THIS ANSWER). But I don't believe that is a good approach convert to array in every digest cycle with a filter.

Pramod_Para · Answer 2 · 2017-03-21T14:55:26.603

0

orderBy looks for the properties you tell it to, within the current element from your array.

You should use the following syntax

orderBy: 'key'

Check this plunkr https://plnkr.co/edit/?p=preview

edited Mar 21 '17 at 14:55

answered Mar 21 '17 at 14:42

Pramod_Para

671
3
10

I have updated the answer with a plunker link, please refer for a detailed understanding on how to use it – Pramod_Para Mar 21 '17 at 14:55
It's empty plunkier – kenik Dec 02 '21 at 13:44

AngularJS oderBy ob key value map

2 Answers2