How can i order by one of json's property while looping through the same json using ng-repeat?

Question

the html:-

<div class="question" ng-repeat="x in asdf">
        <p >{{x}}</p>
</div>

the json:-

  $scope.asdf = {
  "1": {"question":"Jquery, hide radio button label if not selected","votes": "233", "answers": "2", "views": "2", "tags": "html", "dateString": "Aug 22 2016 16:52", "date": "1471864975000"},
  "2": {"question":"Jquery, hide radio button label if not selected","votes": "233", "answers": "2", "views": "2", "tags": "html", "dateString": "Aug 22 2016 16:52", "date": "1471864975000"},
  "3": {"question":"Jquery, hide radio button label if not selected","votes": "233", "answers": "2", "views": "2", "tags": "html", "dateString": "Aug 22 2016 16:52", "date": "1471864975000"},
  "5": {"question":"Jquery, hide radio button label if not selected","votes": "233", "answers": "2", "views": "2", "tags": "html", "dateString": "Aug 22 2016 16:52", "date": "1471864975000"},
  "6": {"question":"Jquery, hide radio button label if not selected","votes": "233", "answers": "2", "views": "2", "tags": "html", "dateString": "Aug 22 2016 16:52", "date": "1471864975000"},
  "7": {"question":"Jquery, hide radio button label if not selected","votes": "233", "answers": "2", "views": "2", "tags": "html", "dateString": "Aug 22 2016 16:52", "date": "1471864975000"},
  "8": {"question":"Jquery, hide radio button label if not selected","votes": "233", "answers": "2", "views": "2", "tags": "html", "dateString": "Aug 22 2016 16:52", "date": "1471864975000"},
  "9": {"question":"Jquery, hide radio button label if not selected","votes": "233", "answers": "2", "views": "2", "tags": "html", "dateString": "Aug 22 2016 16:52", "date": "1471864975000"}
};

This is what i am trying to do, to order it by date (date is a property in json)

<div class="question" ng-repeat="x in asdf | orderBy : date">
    <p >{{x}}</p>
</div>

Also tried

<div class="question" ng-repeat="x in asdf | orderBy : x.date">
<div class="question" ng-repeat="x in asdf | orderBy : asdf.date">

nothing seems to work

1 - Why is this not possible ?

2 - What should i do to achieve similar results ?

Note - I want to repeat on the particular div with class="question", don't wanna create another div.

That's not JSON. JSON is a *textual notation* for data exchange. [(More)](http://stackoverflow.com/a/2904181/157247) If you're dealing with JavaScript source code, and not dealing with a *string*, you're not dealing with JSON. — T.J. Crowder, Aug 22 '16 at 13:09
To further extrapolate, javascript Objects (which is what you have) are not sortable, so no you cannot sort it. — Dellirium, Aug 22 '16 at 13:10
Why not make the object you have assigned to `$scope.asdf` an array, rather than an object? — T.J. Crowder, Aug 22 '16 at 13:10
@Dellirium: Well, that's not true anymore, but the fact it's not true anymore isn't particularly useful, so... :-) — T.J. Crowder, Aug 22 '16 at 13:11
@Dellirium: As of ES2015, there's an order to properties in objects for many operations; [details](http://www.ecma-international.org/ecma-262/6.0/index.html#sec-ordinary-object-internal-methods-and-internal-slots-ownpropertykeys). But that fact isn't particularly useful. :-) — T.J. Crowder, Aug 22 '16 at 13:14
@T.J.Crowder From what I noticed they are alphabetically sorted, though every book, ever, said that it is not reliable and in that sense should not be rallied upon. Can we influence this order in any way, or is it just "will always be like that" sort of scenario. — Dellirium, Aug 22 '16 at 13:17
@Dellirium: No, they're not alphabetical; I'm not aware of any JavaScript engine that did that. You can manipulate the order in some ways (primarily by controlling when you create the property relative to other properties), details in the link I added to the comment after you read it. :-) — T.J. Crowder, Aug 22 '16 at 13:18
@T.J.Crowder thank you for the answers. If I read this correctly integer based keys are always on top, after that order of property creation is what determins the order of properties. I do not see this having any true value though since we cannot control it properly, or we lose the dynamic nature of JS objects, but it is an interesting development. — Dellirium, Aug 22 '16 at 13:23
@T.J.Crowder, I didn't understand your point, can you give a js example or something, that is sorting a json. — Ankur Marwaha, Aug 22 '16 at 13:37
@AnkurMarwaha: No, JSON is text. What you have in your source code is an object. — T.J. Crowder, Aug 22 '16 at 14:15
@T.J.Crowder, Do i need to include it in quotes to make it json ? Whenever i check using any JSON validator, it is comming out to be true. What i know is for json, keys must be strings and that is what's the case here. — Ankur Marwaha, Aug 22 '16 at 14:32
do I need to inlude the asdf into single quotes to make it valid json ? — Ankur Marwaha, Aug 22 '16 at 14:41
@AnkurMarwaha: It's fine that it's not JSON. It's an object initializer. Did you [read the link I gave you](http://stackoverflow.com/a/2904181/157247)? JSON -- a **textual** notation for data exchange -- is a subset of JavaScript object initializer syntax. My point isn't that you have to change anything. Just stop thinking of it as JSON. In your source code, if it's not a *string*, it's not JSON. — T.J. Crowder, Aug 22 '16 at 14:46

score 0 · Answer 1 · edited May 23 '17 at 12:22

The orderBy filter argument needs to be a string, in this case. So this should work:

<div class="question" ng-repeat="x in asdf | orderBy : 'date'">
    <p>{{x}}</p>
</div>

Here's the explanation from the docs:

string: An Angular expression. This expression will be evaluated against each item and the result will be used for sorting. For example, use 'label' to sort by a property called label or 'label.substring(0, 3)' to sort by the first 3 characters of the label property. (The result of a constant expression is interpreted as a property name to be used for comparison. For example, use '"special name"' (note the extra pair of quotes) to sort by a property called special name.)

from https://docs.angularjs.org/api/ng/filter/orderBy

EDIT: But the orderBy filter only works on arrays (or array-like objects)

The collection can be an Array or array-like object (e.g. NodeList, jQuery object, TypedArray, String, etc).

So you'd first need to get your data in to a different structure, or use a custom solution to order it. eg:

Angular orderBy object possible?

That doesn't work in this case, can you give a working code snippet ? — Ankur Marwaha, Aug 22 '16 at 13:39

How can i order by one of json's property while looping through the same json using ng-repeat?

1 Answers1