AngularJS sorting by property
JavascriptAngularjsJavascript Problem Overview
What I am trying to do is sort some data by property. Here is example that I tought should work but it doesn't.
HTML part:
<div ng-app='myApp'>
<div ng-controller="controller">
<ul>
<li ng-repeat="(key, value) in testData | orderBy:'value.order'">
{{value.order}}. {{key}} -> {{value.name}}
</li>
</ul>
</div>
</div>
JS part:
var myApp = angular.module('myApp', []);
myApp.controller('controller', ['$scope', function ($scope) {
$scope.testData = {
C: {name:"CData", order: 1},
B: {name:"BData", order: 2},
A: {name:"AData", order: 3},
}
}]);
And the result:
> 3. A -> AData > 2. B -> BData > 1. C -> CData
... that IMHO should look like this:
> 1. C -> CData > 2. B -> BData > 3. A -> AData
Did I miss something (here is ready JSFiddle to experiment on)?
Javascript Solutions
Solution 1 - Javascript
AngularJS' orderBy filter does just support arrays - no objects. So you have to write an own small filter, which does the sorting for you.
Or change the format of data you handle with (if you have influence on that). An array containing objects is sortable by native orderBy filter.
Here is my orderObjectBy filter for AngularJS:
app.filter('orderObjectBy', function(){
return function(input, attribute) {
if (!angular.isObject(input)) return input;
var array = [];
for(var objectKey in input) {
array.push(input[objectKey]);
}
array.sort(function(a, b){
a = parseInt(a[attribute]);
b = parseInt(b[attribute]);
return a - b;
});
return array;
}
});
Usage in your view:
<div class="item" ng-repeat="item in items | orderObjectBy:'position'">
//...
</div>
The object needs in this example a position attribute, but you have the flexibility to use any attribute in objects (containing an integer), just by definition in view.
Example JSON:
{
"123": {"name": "Test B", "position": "2"},
"456": {"name": "Test A", "position": "1"}
}
Here is a fiddle which shows you the usage: http://jsfiddle.net/4tkj8/1/
Solution 2 - Javascript
It's pretty easy, just do it like this
$scope.props = [{order:"1"},{order:"5"},{order:"2"}]
ng-repeat="prop in props | orderBy:'order'"
Solution 3 - Javascript
Don't forget that parseInt() only works for Integer values. To sort string values you need to swap this:
array.sort(function(a, b){
a = parseInt(a[attribute]);
b = parseInt(b[attribute]);
return a - b;
});
with this:
array.sort(function(a, b){
var alc = a[attribute].toLowerCase(),
blc = b[attribute].toLowerCase();
return alc > blc ? 1 : alc < blc ? -1 : 0;
});
Solution 4 - Javascript
As you can see in the code of angular-JS ( https://github.com/angular/angular.js/blob/master/src/ng/filter/orderBy.js ) ng-repeat does not work with objects. Here is a hack with sortFunction.
http://jsfiddle.net/sunnycpp/qaK56/33/
<div ng-app='myApp'>
<div ng-controller="controller">
<ul>
<li ng-repeat="test in testData | orderBy:sortMe()">
Order = {{test.value.order}} -> Key={{test.key}} Name=:{{test.value.name}}
</li>
</ul>
</div>
</div>
myApp.controller('controller', ['$scope', function ($scope) {
var testData = {
a:{name:"CData", order: 2},
b:{name:"AData", order: 3},
c:{name:"BData", order: 1}
};
$scope.testData = _.map(testData, function(vValue, vKey) {
return { key:vKey, value:vValue };
}) ;
$scope.sortMe = function() {
return function(object) {
return object.value.order;
}
}
}]);
Solution 5 - Javascript
according to http://docs.angularjs.org/api/ng.filter:orderBy , orderBy sorts an array. In your case you're passing an object, so You'll have to implement Your own sorting function.
or pass an array -
$scope.testData = {
C: {name:"CData", order: 1},
B: {name:"BData", order: 2},
A: {name:"AData", order: 3},
}
take a look at http://jsfiddle.net/qaK56/
Solution 6 - Javascript
You should really improve your JSON structure to fix your problem:
$scope.testData = [
{name:"CData", order: 1},
{name:"BData", order: 2},
{name:"AData", order: 3},
]
Then you could do
<li ng-repeat="test in testData | orderBy:order">...</li>
The problem, I think, is that the (key, value) variables are not available to the orderBy filter, and you should not be storing data in your keys anyways
Solution 7 - Javascript
Here is what i did and it works.
I just used a stringified object.
$scope.thread = [
{
mostRecent:{text:'hello world',timeStamp:12345678 }
allMessages:[]
}
{MoreThreads...}
{etc....}
]
<div ng-repeat="message in thread | orderBy : '-mostRecent.timeStamp'" >
if i wanted to sort by text i would do
orderBy : 'mostRecent.text'
Solution 8 - Javascript
I will add my upgraded version of filter which able to supports next syntax:
ng-repeat="(id, item) in $ctrl.modelData | orderObjectBy:'itemProperty.someOrder':'asc'
app.filter('orderObjectBy', function(){
function byString(o, s) {
s = s.replace(/\[(\w+)\]/g, '.$1'); // convert indexes to properties
s = s.replace(/^\./, ''); // strip a leading dot
var a = s.split('.');
for (var i = 0, n = a.length; i < n; ++i) {
var k = a[i];
if (k in o) {
o = o[k];
} else {
return;
}
}
return o;
}
return function(input, attribute, direction) {
if (!angular.isObject(input)) return input;
var array = [];
for(var objectKey in input) {
if (input.hasOwnProperty(objectKey)) {
array.push(input[objectKey]);
}
}
array.sort(function(a, b){
a = parseInt(byString(a, attribute));
b = parseInt(byString(b, attribute));
return direction == 'asc' ? a - b : b - a;
});
return array;
}
})
Thanks to Armin and Jason for their answers in this thread, and Alnitak in this thread.
Solution 9 - Javascript
Armin's answer + a strict check for object types and non-angular keys such as $resolve
app.filter('orderObjectBy', function(){
return function(input, attribute) {
if (!angular.isObject(input)) return input;
var array = [];
for(var objectKey in input) {
if (typeof(input[objectKey]) === "object" && objectKey.charAt(0) !== "$")
array.push(input[objectKey]);
}
array.sort(function(a, b){
a = parseInt(a[attribute]);
b = parseInt(b[attribute]);
return a - b;
});
return array;
}
})
Solution 10 - Javascript
The following allows for the ordering of objects by key OR by a key within an object.
In template you can do something like:
<li ng-repeat="(k,i) in objectList | orderObjectsBy: 'someKey'">
Or even:
<li ng-repeat="(k,i) in objectList | orderObjectsBy: 'someObj.someKey'">
The filter:
app.filter('orderObjectsBy', function(){
return function(input, attribute) {
if (!angular.isObject(input)) return input;
// Filter out angular objects.
var array = [];
for(var objectKey in input) {
if (typeof(input[objectKey]) === "object" && objectKey.charAt(0) !== "$")
array.push(input[objectKey]);
}
var attributeChain = attribute.split(".");
array.sort(function(a, b){
for (var i=0; i < attributeChain.length; i++) {
a = (typeof(a) === "object") && a.hasOwnProperty( attributeChain[i]) ? a[attributeChain[i]] : 0;
b = (typeof(b) === "object") && b.hasOwnProperty( attributeChain[i]) ? b[attributeChain[i]] : 0;
}
return parseInt(a) - parseInt(b);
});
return array;
}
})