Sorting an array of objects based on a property in an Angular controller using $filter

Question

I have an array of objects called $scope.segments like this:

[
  {
    "_id": "55d1167655745c8d3679cdb5",
    "job_id": "55d0a6feab0332116d74b253",
    "status": "available",
    "sequence": 1,
    "body_original": "Such a fork",
    "__v": 0,
    "body_translated": "Tal bifurcación"
  },
  {
    "_id": "55d1167655745c8d3679cdb4",
    "job_id": "55d0a6feab0332116d74b253",
    "status": "available",
    "sequence": 0,
    "body_original": "So this is it.",
    "__v": 0,
    "body_translated": "Así que esto es."
  }
]

I need to order this by array by sequence. So, I need the sequence 0 to appear first, the sequence 1 to appear next, and so on. In a view, I'm doing this and it works:

<ul ng-repeat="segment in segments | orderBy: 'sequence'">
    <li>{{ segment.sequence }}</li>
</u>

However, I need the orderBy filter to work in a controller. I'm doing this:

$scope.test = $filter('orderBy')($scope.segments, 'sequence');

Where, $scope.test should be my ordered array of objects based on the the sequence property. However, when I do console.log('$scope.test') an empty array ([]) shows. I imagine the $filter is not working in the controller.

Any ideas on how to solve this? Thanks!

be sure that $scope.segments is not empty when you print it, because ng-repeat listens on segments change — Maxim Shoustin
– Maxim Shoustin, Commented Aug 19, 2015 at 15:30

SuperVeetz · Accepted Answer · 2015-08-19 15:58:27Z

7

I guess you just didn't inject the $filter service in your controller properly, because this worked for me.

<body ng-controller="MainCtrl">

  <ul ng-repeat="segment in segments | orderBy: 'sequence'">
    <li>{{segment.sequence}}</li>
  </ul>

  <script src="vendors/angular.min.js"></script>

  <script>
    angular.module('app', [])

    .controller('MainCtrl', ['$scope', '$filter', function($scope, $filter) {
      $scope.segments = [
      {
        "_id": "55d1167655745c8d3679cdb5",
        "job_id": "55d0a6feab0332116d74b253",
        "status": "available",
        "sequence": 1,
        "body_original": "Such a fork",
        "__v": 0,
        "body_translated": "Tal bifurcación"
      },
      {
        "_id": "55d1167655745c8d3679cdb4",
        "job_id": "55d0a6feab0332116d74b253",
        "status": "available",
        "sequence": 0,
        "body_original": "So this is it.",
        "__v": 0,
        "body_translated": "Así que esto es."
      }
    ];
      $scope.test = $filter('orderBy')($scope.segments, 'sequence');
      console.log($scope.test);
    }]);
  </script>

</body>

answered Aug 19, 2015 at 15:58

SuperVeetz

2,1483 gold badges25 silver badges38 bronze badges

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

2 Comments

Rodrigo Galindez Over a year ago

Sorry guys, the objects comes from a $resource call to an aPI. Doing in the view {{ segments | json }} prettyfies the object. However, doing console.log('$scope.segments'); shows that the object is a promise. How to sort inside this promise that cointains the objects?

SuperVeetz Over a year ago

Usually the promise will contain the model data somewhere inside of it. ex. $scope.segments = injectedPromise.data[0];

tymeJV · Accepted Answer · 2015-08-19 15:29:16Z

3

You can always just sort the array (then you can even omit the orderBy in the view - although you lose some of the magic with the bindings if anything is added):

$scope.segments.sort(function(a, b) {
    return a.sequence - b.sequence;
});

answered Aug 19, 2015 at 15:29

tymeJV

105k14 gold badges165 silver badges158 bronze badges

2 Comments

Rodrigo Galindez Over a year ago

Tried this but not working, unfortunately. Here's what I have in main.js $scope.segments = SegmentsService.getSegments(jobId); // gets the segments from the API $scope.segments.sort(function(a, b) { return a.sequence - b.sequence; }); console.log($scope.segments); In the view, I have: <pre>{{ segments | json }}</pre> So, I get the segments from the API, and in the view I show them with segments | json. An after the sorting is done, the object sorted is printed in the console. Here's a screenshot: imgur.com/UUBDpXq

tymeJV Over a year ago

That API call is async - so the sorting is occurring before the array is populated.

Rodrigo Galindez · Accepted Answer · 2015-08-19 20:31:53Z

0

As mentioned by tymeJV, the API call is async, and so the question is missing data to help answer it.

answered Aug 19, 2015 at 20:31

Rodrigo Galindez

1291 gold badge2 silver badges12 bronze badges

Collectives™ on Stack Overflow

Sorting an array of objects based on a property in an Angular controller using $filter

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related