AngularJs ng-repeat of objects orderBy object-id in array

Question

I want to order the result of an ng-repeat of objects by his specific object "id". This order is in an array so i made this custom filter ng-repeat="line in dataObject|objectIdFilter:orderByArray":

.filter('objectIdFilter', [function() {
    return function(inputObjet, orderArray) {
        var result = [];
        angular.forEach(orderArray, function(value) {
          result.push(inputObjet[value]);
        });
        console.log(result);
        return result;
    }
}])

And that's an example basic controller with the objects and the order id in an array:

.controller('MainCtrl', ['$scope', function($scope) {

  $scope.dataObject = {
    1: {username:'user1'},
    10: {username:'user10'},
    20: {username:'user20'},
    500: {username:'user500'}
  };

  $scope.orderByArray = [20,10,1,500];

}])

With his HTML:

<div ng-app="myApp">
  <div ng-controller="MainCtrl">
      <div ng-repeat="line in dataObject|objectIdFilter:orderByArray">{{line.username}}</div>
  </div>
</div>

Jsfiddle: https://jsfiddle.net/infnadanada/tLrx4uro/

so...

All is working Ok but i don't know if there is another way to order the ng-repeat like i did without using a custom filter.
As well if you go to the Jsfiddle in the browser console you can see how my custom filter is returning 2 times the result and i don't know why.

PD: English is not my 1st language :D

Thanks

See for your second problem http://stackoverflow.com/questions/9682092/databinding-in-angularjs — intekhab, Sep 07 '15 at 09:13
@intekhab is for datbinding problem? `apply`'s `diggest`'s..? So it's an angularjs native problem? Can i do something to solve that? — nada, Sep 07 '15 at 09:25
I would create js function in controller to do the same as your filter 'objectIdFilter' does, and call it once, because filter getting called every time you do something with collection. — Dmitri Algazin, Sep 07 '15 at 09:25
ok i see. You guys are right, i can do the same and clear the html template code. — nada, Sep 07 '15 at 09:28

intekhab · Accepted Answer · 2015-09-07T09:34:59.613

There may be another good approach but you can filter your data inside your controller without using filter. By using this you can prevent angular to calling the filter twice.

$scope.dataObject = {
    1: {username:'user1'},
    10: {username:'user10'},
    20: {username:'user20'},
    500: {username:'user500'}
  };
  $scope.orderByArray = [20,10,1,500];
   $scope.result = [];
  angular.forEach($scope.orderByArray, function(value) {
      $scope.result.push($scope.dataObject[value]);
  });
}]);

Inside the template

<div ng-app="myApp">
  <div ng-controller="MainCtrl">
      <div ng-repeat="line in result">{{line.username}}</div>
  </div>
</div>

score 1 · Answer 2 · answered Sep 07 '15 at 09:51

1

Other way: you can iterate through map: https://jsfiddle.net/sherali/tLrx4uro/2/

$scope.dataObject = {
    1: {username:'user1'},
    10: {username:'user10'},
    20: {username:'user20'},
    500: {username:'user500'}
  };
  $scope.orderByArray = [20,10,1,500];
  $scope.result = $scope.orderByArray.map(function(value){
      return $scope.dataObject[value];
  });

answered Sep 07 '15 at 09:51

Sherali Turdiyev

1,745
16
29

1

it's a valid answer but i searched a little what can be better and i found http://jsperf.com/map-foreach i don't know if that can be valid for `angular.forEach` i will investigate a bit more :D Thanks – nada Sep 07 '15 at 10:08
@nada. Thanks for above link. I didn't know – Sherali Turdiyev Sep 07 '15 at 10:14
also, i researched above foreach(angular and native). I found that: https://jsperf.com/angular-foreach-vs-native-for-loop/3 – Sherali Turdiyev Sep 07 '15 at 10:24
`angular.forEach(arr...)` is faster than `arr.forEach(...)` – Sherali Turdiyev Sep 07 '15 at 11:08

AngularJs ng-repeat of objects orderBy object-id in array

2 Answers2