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
– charlietfl, Commented Feb 8, 2016 at 9:26

Walfrat · Accepted Answer · 2016-02-08 09:42:43Z

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 8, 2016 at 9:42

Walfrat

5,3941 gold badge18 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user3531149 Over a year ago

ended up doing this for(var index in $scope.poi_groups) { map_groups_to_array.push( { index: index, name: $scope.poi_groups[index].name }); };

Walfrat Over a year ago

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.

I'm Geeker · Accepted Answer · 2016-02-08 09:37:39Z

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 8, 2016 at 9:37

I'm Geeker

4,6575 gold badges25 silver badges42 bronze badges

answered Feb 8, 2016 at 9:23

Stepan Suvorov

26.3k27 gold badges117 silver badges178 bronze badges

2 Comments

user3531149 Over a year ago

for some reason the filter does nothing

charlietfl Over a year ago

@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

Collectives™ on Stack Overflow

How to sort this object by name in angular

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related