Skip ng-repeat JSON ordering in Angular JS

Nice workaround found at google groups:

    <div ng-repeat="key in notSorted(data)" ng-init="value = data[key]">
         <pre>
               key: {{key}}
               value: {{value}}
         </pre>           
    </div>

And in scope:

    $scope.data = {
        'key4': 'data4',
        'key1': 'data1',
        'key3': 'data3',
        'key2': 'data2',
        'key5': 'data5'
    };

    $scope.notSorted = function(obj){
        if (!obj) {
            return [];
        }
        return Object.keys(obj);
    }

Working: http://jsfiddle.net/DnEXC/

Original: https://groups.google.com/forum/#!topic/angular/N87uqMfwcTs

This answer using filter works best for me.

https://groups.google.com/d/msg/angular/N87uqMfwcTs/EGoY6O2gtzsJ

http://jsfiddle.net/er52h/1/

angular.module('myFilters', [])
  .filter('keys', function() {
    return function(input) {
      if (!input) {
        return [];
      }
      return Object.keys(input);
    }
  });

You can use like this:

<div ng-repeat="key in data | keys" ng-init="value = data[key]"></div>

I am using this approach to override the alphabetical ordering:

Controller:

$scope.steps = {
    "basic-settings": "Basic Settings",
    "editor": "Editor",
    "preview-and-publish": "Preview & Publish"
};

// NOTE I realise this is a hacky way, but I need to override JS's alphabetical ordering
$scope.stepsKeys = _.keys($scope.steps);

$scope.activeStep = 0;

PLEASE NOTE that _.keys($scope.steps); is LoDash substituting Object.keys();

HTML:

<ul>
    <li ng-repeat="key in stepsKeys" ng-class="{active : stepsKeys[activeStep] == key}">{{ steps[key] }}</li>
</ul>

At the moment there is no elegant way to do this. Reason being that - ngRepeat creates an associative array, which is called and not the JSON itself. Although the ECMAScript Standard mentions that:

The declaration order of object properties must be preserved, and iteration must happen in the same order.

But somehow, Angular guys overlooked it. This might get rectified in the later releases.

I still think Angular's behaviour makes more sense. As objects often have more initialisation logic around them than arrays, I think it's fair to assume that the order often might not be what the user actually wants/expected, so forcing a specific sorting ensure the proper behaviour - especially when we also have to deal with older browsers.

Skip ng-repeat JSON ordering in Angular JS

Related

Recent Posts