Re: [angular.js] ng-repeat with no sort? How?!

[Oliver Batchelor]

You'll have to use an array and index into the object - because
objects are ordered by their key.

e.g.
http://jsfiddle.net/Saulzar/puhML/3/

Cheers,
Oliver

On Thu, Jul 5, 2012 at 10:42 AM, Alain Duchesneau
<alaindu...@ock.am> wrote:
> Hi all,
>
> Why do the ng-repeat directive sorts the object / collection that's been
> passed:
>
> http://jsfiddle.net/zzal/puhML/
>
> How can we list the object as first declared?
>
>
> --
> You received this message because you are subscribed to the Google Groups
> "AngularJS" group.
> To view this discussion on the web visit
> https://groups.google.com/d/msg/angular/-/uRWb6bYt0sMJ.
> To post to this group, send email to ang...@googlegroups.com.
> To unsubscribe from this group, send email to
> angular+u...@googlegroups.com.
> For more options, visit this group at
> http://groups.google.com/group/angular?hl=en.

[Mark Holtzhausen]

I have this same issue. I construct dynamic fields, but instead of constructing it in the same order I defined them, it alphabetises it - highly irritating

[Pawel Kozlowski]

Hmm, funny, didn't know that ngRepeat behaves likes this!

At the beginning I thought it was regular JS or angular.forEach but
no, both don't mess up keys:
http://jsfiddle.net/pkozlowski_opensource/tKncW/4/

Actually it looks like a non-array collections are sorted explicitly:
https://github.com/angular/angular.js/blob/master/src/ng/directive/ngRepeat.js#L112

which, personally, I find surprising (!). On my side I'm not effected
by this (using arrays for all the collections) but if you are burned
by this I would suggest opening an issue on the GitHub (so at least
the core team has a chance to explain rationale behind such behavior).

Cheers,
Pawel

> --
> You received this message because you are subscribed to the Google Groups
> "AngularJS" group.

> To post to this group, send email to ang...@googlegroups.com.
> To unsubscribe from this group, send email to
> angular+u...@googlegroups.com.

> Visit this group at http://groups.google.com/group/angular?hl=en.
>
>



--
Question? Send a fiddle
(http://jsfiddle.net/pkozlowski_opensource/Q2NpJ/) or a plunk
(http://plnkr.co/)
Need help with jsFiddle? Check this:
http://pkozlowskios.wordpress.com/2012/08/12/using-jsfiddle-with-angularjs/

Looking for UI widget library for AngularJS? Here you go:
http://angular-ui.github.com/

[Godmar Back]

So that's an interesting question whether JavaScript's object property iterator produces a defined order or not.

If it doesn't, Angular might as well sort them since you can't rely on any order, anyway.

Here are some sources: 

http://javascriptweblog.wordpress.com/2011/01/04/exploring-javascript-for-in-loops/

http://code.google.com/p/chromium/issues/detail?id=883 

http://code.google.com/p/v8/issues/detail?id=164

So it appears that relying on insertion/declaration order is not robust, anyway - for instance, it doesn't work in Chrome for numeric properties.

 - Godmar

[Pawel Kozlowski]

Hi!

On Fri, Sep 21, 2012 at 3:37 PM, Godmar Back <god...@gmail.com> wrote:
>
> So that's an interesting question whether JavaScript's object property
> iterator produces a defined order or not.

Well, my understanding that this is pretty much unspecified. It is
somehow confirmed in one of the articles you've sent (the first link):

"The ECMA standard does not specify an enumeration order but the de
facto standard for non-array objects is to enumerate properties
according to the order of their original assignment."

> If it doesn't, Angular might as well sort them since you can't rely on any
> order, anyway.

Yep. Removing this sort would mean - in practice - that the repeater
order is more or less random. So sorting keys at least gives some
consistent order.

Anyway, I guess the lesson here is: we shouldn't be using enumeration
over object's properties if we do care about consistent order of
iteration. This is what arrays are for, objects are just associative
arrays.

Cheers,
Pawel

[Jochen Szostek]

Aloha guys!

So if I get it right, there's no way in Angular to iterate an object's key/value pairs keeping the order in which the properties were declared?

This would, in my case, be somewhat annoying unfortunately.

Thanks & greets,

Jochen

Op vrijdag 21 september 2012 16:42:45 UTC+2 schreef Pawel Kozlowski het volgende:

[Peter Bacon Darwin]

This is a restriction in javascript not angular. Different javascript engines can store properties in different orders.

Pete
...from my mobile.

--

You received this message because you are subscribed to the Google Groups "AngularJS" group.

To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.

To post to this group, send email to ang...@googlegroups.com.

Visit this group at http://groups.google.com/group/angular?hl=en-US.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Sergey Gurevich]

Hi. I found a way to achieve the above by ng-repeating array of associative keys based on the object and injecting the correct value using ng-init. Its possible as ng-repeat has its own scope.

http://jsfiddle.net/DnEXC/

//Fix for sorting objects. By default they are sorted by associative index.

//<div ng-repeat="key in notSorted(objToRepeat)" ng-init="value = objToRepeat[key]"></div>

$scope.notSorted = function(obj){

if (!obj) {

return [];

}

return Object.keys(obj);

}

[Manolis Kp]

Thanks for this! Its a very nice workaround for this issue, I was struggling for a long time for this!

[Jaydn De Graaf]

Thank you Sergey! Quick fix to a long search, owe you big time. 

[Henrique Recidive]

Hello, I've implement a variation of Sergey's approach using a filter, so we don't need to have the notSorted() method in all controllers.

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>

Hope this helps someone else.

Cheers,

Henrique

[Evgeniy Tkachenko]

Henrique Recidive  not work for me 

http://jsfiddle.net/er52h/2/

[Jay Klehr]

That's because you're using numeric keys, JS sorts those when it creates the object (at least in Chrome, other browsers may behave differently), so there's nothing that can be done as Object.keys() will return them ordered (event console.log of the object does, outside of angular):

(open up your JS console to see how the two objects differ, no angular in this, just a raw fiddle)

http://jsfiddle.net/jaydiablo/Mx28T/

[Ajay Sharma]

that's because you are using json object whenever face this kind  of problem change your json boject to json array object.

{"India":"IN","America":"US","United Kingdon":"UK"} json object

[{"country":"India","countryId":"IN"},{"country":"America","countryId":"US"},{"country":"United Kingdon","countryId":"UK"}] json array object

[Sander Elias]

Hi Aya,

I'm pretty sure he has figured it out by now ;)

Regards

Sander