Skip ng-repeat JSON ordering in Angular JS

Question

Does anybody know how I can SKIP JSON ordering altogether when I use ng-repeat (in a painless way probably)?

For example, my source JSON looks something like this -

{
   "title": "Title",
   "description": "Description",
   "moreInfo": "Moreinformation"
}

Once I use it in ng-repeat, it orders them alphabetically. Something like this -

{
   "description": "Description",
   "moreInfo": "Moreinformation",
   "title": "Title"
}

My ng-repeat looks something like this -

<div ng-repeat="(key,data) in items">
   <span class="one"> {{key}} </span>
   <span class="two"> {{data}} </span>
</div>

I've seen people having a separate array of the keys and using them to identify the JSON objects, ultimately avoiding alphabetical sorting.

Is there an elegant way to do this?

take a look: jsfiddle.net/DnEXC/5. From here: groups.google.com/forum/#!topic/angular/N87uqMfwcTs — Ivan Chernykh
– Ivan Chernykh, Commented Oct 10, 2013 at 6:29
@Cherniv That is interesting. Altough it uses a similar approach. It looks pretty neat. Can you post that as one of the answers? (With the code probably). Pretty sure it'll help someone until the Angular folks rectify this issue. — Aswin Ramakrishnan
– Aswin Ramakrishnan, Commented Oct 10, 2013 at 15:51

Ivan Chernykh · Accepted Answer · 2013-10-10 16:04:54Z

38

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

answered Oct 10, 2013 at 16:04

Ivan Chernykh

42.2k13 gold badges136 silver badges148 bronze badges

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

8 Comments

Conqueror Over a year ago

Great, simple solution +1

rob-ot Over a year ago

A live safer ! @Cherniv

Paranoid Android Over a year ago

this solution breaks Smart-Table pagination feature though, if anyone is using it lorenzofox3.github.io/smart-table-website

Taiwei Tuan Over a year ago

You are a god send. +1

supersan Over a year ago

please note that ng-init only runs once on initialization (think of it as a one time binding).. so if your values change for data, it will not be reflected. (@SebinSimon i think that is the reason why it's not working for you also)

|

angelokh · Accepted Answer · 2014-02-19 17:52:28Z

4

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>

answered Feb 19, 2014 at 17:52

angelokh

9,46811 gold badges78 silver badges152 bronze badges

1 Comment

Ferenc Takacs Over a year ago

This is the cleanest solution.

Slavo Vojacek · Accepted Answer · 2015-01-01 15:26:28Z

4

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>

edited Jan 1, 2015 at 15:26

answered Jan 1, 2015 at 13:36

Slavo Vojacek

1,0628 silver badges6 bronze badges

Comments

Arshabh Agarwal · Accepted Answer · 2013-10-10 06:07:10Z

1

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.

answered Oct 10, 2013 at 6:07

Arshabh Agarwal

5562 silver badges15 bronze badges

1 Comment

Aswin Ramakrishnan Over a year ago

I agree and disagree. I agree with the fact that expecting order on objects isn't a very good approach. But Angular JS being an awesome framework, one would expect there is an elegant solution (or atleast a solution) to this problem. I'm not sure how having ordinals on objects would affect the framework's performance, but I think it wouldn't hurt to adopt one of the hacks out there to solve this simple issue. So it is ok to not have a solution for this issue. Actually, the comment posted by Cherniv looks pretty decent.

Collectives™ on Stack Overflow

Skip ng-repeat JSON ordering in Angular JS

4 Answers 4

8 Comments

1 Comment

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

8 Comments

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related