How to sort object data source in ng-repeat in AngularJS?

AngularjsAngularjs Ng-RepeatAngularjs Orderby

Angularjs Problem Overview


Suppose I have the following users:

$scope.users = {
  "2": {
    email: '[email protected]',
    name: 'John'
  },
  "3": {
    email: '[email protected]',
    name: 'Elisa'
  }
}

I would like to create a <select> with the following options:

<option value="3">Elisa</option>
<option value="2">John</option>

In other words, users should be sorted by name.

I tried the following using the (key, value) in expression syntax, but it doesn't work:

<option ng-repeat="(user_id, user) in users | orderBy:'user.name'" 
        value="{{ user.id }}">
  {{ user.name }}
</option>

Live example here.

What am I missing?

Please do not suggest solutions with ng-options as I use ui-select2 which is incompatible with ng-options.

Angularjs Solutions


Solution 1 - Angularjs

While you would see this in the thread the author's answer references in a link, I thought it would be good to put up one of the mentioned workarounds up on SO:

It is true that this is technically not implemented, but there is an easy work around if you're willing to change your data model slightly: use a custom filter to generate an array of the object's properties (without replacement). If you add the key field to the objects ("id" in the above case), you should be able to get the behavior your looking for:

app.filter("toArray", function(){
	return function(obj) {
		var result = [];
		angular.forEach(obj, function(val, key) {
			result.push(val);
		});
		return result;
	};
});
...

$scope.users = {
	1: {name: "John", email: "[email protected]", id: 1},
	2: {name: "Elisa", email: "[email protected]", id: 2}
};

Here's the ng-repeat directive that could be used:

<option value="{{user.id}}" ng-repeat="user in users | toArray | orderBy:'name'">{{user.name}}</option>

And here's the plunkr.

Notice that the orderBy filter takes name as its parameter and not user.name.

Unfortunately, adding the id property to your objects does create potential for mismatch with it's key in the containing object.

In the link you mentioned in your answer, there are also proposed solutions that create the id property in the user objects on the fly, but I feel like this approach is a little less messy (at the cost of introducing data replication).

Solution 2 - Angularjs

OK, I found the answer:

It is not implemented yet :(

Solution 3 - Angularjs

Adding to the accepted answer and seeing your data format, you should transform your data as

app.filter('myFilterUsers',function(){
	return function(data)
	{
		var newRes = [];
		angular.forEach(data,function(val,key){
			val["id"] = key;  //Add the ID in the JSON object as you need this as well.
			newRes.push(val);
		});
		return newRes;
	}
});

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionMisha MoroshkoView Question on Stackoverflow
Solution 1 - AngularjsmhessView Answer on Stackoverflow
Solution 2 - AngularjsMisha MoroshkoView Answer on Stackoverflow
Solution 3 - AngularjsSakshamView Answer on Stackoverflow