How to sort this object by name in angular

Question

My client needs an angular js app, the app is based on an api, of an app that's already running. one of the apis, returns a json structured like this:

{  
   "groups":{  
      "60":{  
         "name":"History"
      },
      "74":{  
         "name":"Discover our offers"
      },
      "109":{  
         "name":"Relaxing"
      }
   }
}

so we fetched the data on a controller this way:

  $http({method: 'GET', url: restUrl}).
      then(function(response)
      {
          $scope.poi_groups = response.data.groups;
      });

and display it on the view:

<ul class="content-menu">
    <li ng-repeat="(key, value) in poi_groups">
        <div><a ng-href="/poi/data/{{ key }}">{{ value.name }}</a></div>
    </li>
</ul>

What I've been struggling with is ordering the items by name, right now its being displayed exactly the way its returned on the json. How can I do something like:

(...)
<li ng-repeat="(key, value) in poi_groups | orderBy: value.name">
(...)

objects have no order and `orderBy` is for arrays as per docs. Will need to map to array — charlietfl, Feb 08 '16 at 09:26
related http://stackoverflow.com/questions/25375006/angular-orderby-object-possible — charlietfl, Feb 08 '16 at 09:34

score 1 · Accepted Answer · answered Feb 08 '16 at 09:42

1

This structure isn't appropriate for angularjs, either :

Do it yourself in the .then method
Write your own filter
Map your object in a new one in the .then method to make it look like this :

[{ value:'60', name:'History' }, { .... }]

Then you can use angular filtering.

answered Feb 08 '16 at 09:42

Walfrat

5,363
1
16
35

ended up doing this for(var index in $scope.poi_groups) { map_groups_to_array.push( { index: index, name: $scope.poi_groups[index].name }); }; – user3531149 Feb 08 '16 at 10:00
1

This solution is the one that i use because i leave the request part in angular services that take the responsability of call the http request and format data as the controllers need. Transform timestamp to date for instance to not have any problem with all date widgets, or just transform the whole object because his structure does not fit for angular. – Walfrat Feb 08 '16 at 10:12

score 0 · Answer 2 · edited Feb 08 '16 at 09:37

0

use ngRepeat orderBy

Use filter like orderBy: 'name'

 <li ng-repeat="(key, value) in poi_groups| orderBy:'name'">

and

 <li ng-repeat="(key, value) in poi_groups| orderBy:'name': -1">

for DESC

if you make plnk we can check it out

edited Feb 08 '16 at 09:37

I'm Geeker

4,601
5
22
41

answered Feb 08 '16 at 09:23

Stepan Suvorov

25,118
26
108
176

for some reason the filter does nothing – user3531149 Feb 08 '16 at 09:31
@user3531149 because data is not an array and needs to be mapped to array in controller or custom filter to be able to be sorted. Docs for `orderBy` clearly state it is for array – charlietfl Feb 08 '16 at 09:33

How to sort this object by name in angular

2 Answers2