angular orderBy multiple fields has syntax errors

Question

I am trying to use angular orderBy to order multiple fields, but i get syntax error as:

Syntax error, unrecognized expression: div[ng-repeat='r in vm.GetRequests() | filter: vm.SearchText | orderBy:['LastName','FirstName']']

It seems there appears additional sign ']', but i do not have it in html

The html looks like:

<div ng-repeat="r in vm.GetRequests() | filter: vm.SearchText |orderBy:'RequestedOn'| orderBy:['LastName','FirstName']">
{{r.LastName}} : {{r.FirstName}}
</div>

the function GetRequests() returns a array of object as following:

[{FirstName:"Test1", LastName:"First"},{FirstName:"Test2",LastName:"Second"},{FirstName:"Test3",LastName:"Third"}]

Can anyone help me for the problem?

Changing HTM - remove orderBy: 'RequestedOn'

<div ng-repeat="r in vm.GetRequests() | filter: vm.SearchText | orderBy:['LastName','FirstName']">
{{r.LastName}} : {{r.FirstName}}
</div>

but i still get syntax error:

Uncaught Error: Syntax error, unrecognized expression: div[ng-repeat='r in vm.GetRequests() | filter: vm.SearchText | orderBy:['LastName','FirstName']']

UPDATE

The syntax seems comes from a browserlink, because the order works goed when i get the error. And recommend to put all order property in a array

Thanks a lot for the inputs all of you, especially thanks for RishiPrakash :)

see, in the error it ,orderBy : RequestedOn is not present, error must be related to it. — Rishi, Dec 29 '14 at 12:05
@ Rishi Prakash - I remove the first orderBy: 'RequestedOn', but i still get this error : _Uncaught Error: Syntax error, unrecognized expression: div[ng-repeat='r in vm.GetRequests() | filter: vm.SearchText | orderBy:['LastName','FirstName']']_ — echo, Dec 29 '14 at 12:11
that last ] is actually end seniter of div[ng-repeat in error , atleast this riddle is solved — Rishi, Dec 29 '14 at 12:16
@ Rishi Prakash - i see now , the last ']' is the end of error tag, now i do not understand why i still get syntax error. I have already updated the HTML — echo, Dec 29 '14 at 12:20
I updated my answer, vm.SearchText() should be there not vm.SearchText. — Rishi, Dec 29 '14 at 12:22
@Rishi Prakash - I do not think so, because vm.SearchText is just a string of ng-model, i have this HTML for filtering : __, but even i remove |filter: vm.SearchText , i still get the same error — echo, Dec 29 '14 at 12:28
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/67845/discussion-between-rishi-prakash-and-echo). — Rishi, Dec 29 '14 at 12:30
@RishiPrakash : Thanks a lot for your help , and it seems the problem comes from browserlink — echo, Jan 15 '15 at 17:08

Rishi · Answer 1 · 2014-12-29T12:21:56.910

0

try <div ng-repeat="r in vm.GetRequests() | filter: vm.SearchText() | orderBy:['RequestedOn','LastName','FirstName']">

filter:vm.SearhText must be a function so () in end of it.

edited Dec 29 '14 at 12:21

answered Dec 29 '14 at 11:13

Rishi

1,646
2
15
34

"RequestedOn" is also a property of the object, and it is a moment object. First i thought maybe the moment object can not be sorted, that is why i do not put it in the output array. But it is not the reason,i still get the same error – echo Dec 29 '14 at 11:25
tell me the value of moment object? – Rishi Dec 29 '14 at 11:30
@ Rishi Prakash - and another reason i put "RequestedOn" in a seperate orderBy is the array does not correct order for properties "LastName" and "FirstName" if i put "RequestedOn" also in the order array – echo Dec 29 '14 at 11:32
these two object has following moment:1. _d: Mon Oct 27 2014 16:27:30 GMT+0100 (Romance Standard Time)_f: "YYYY-MM-DDTHH:mm:ss"_i: "2014-10-27T16:27:30"_isAMomentObject: true_isUTC: false_locale: Locale_pf: Object__proto__: Moment and 2. _d: Mon Oct 27 2014 10:00:00 GMT+0100 (Romance Standard Time)_f: "YYYY-MM-DDTHH:mm:ss"_i: "2014-10-27T10:00:00"_isAMomentObject: true_isUTC: false_locale: Locale_pf: Object__proto__: Moment – echo Dec 29 '14 at 11:35
Ok, I have create the jsfiddle http://jsfiddle.net/U3pVM/11581/ , can you create the case there? – Rishi Dec 29 '14 at 11:39
@ Rishi Prakash - I know it is working in jsfiddle, I have tried it in Plunker based on the document for orderBy in AngularJS API.It is working fine, but i just do not understand why i get the syntact error – echo Dec 29 '14 at 11:58

Nizar · Answer 2 · 2014-12-29T11:52:42.920

0

I think that filter only works on arrays and doesn't evaluate functions. I would assign the request to a scope variable in the controller:

js:

$scope.requests = vm.GetRequests();

html:

<div ng-repeat="r in requests | filter: vm.SearchText | orderBy:['RequestedOn','LastName','FirstName']"> {{r.FirstName }}, {{r.LastName}} </div>

note: I don't think there's a problem with the way you sort your array, although I prefer combining them in one orderBy expression as Rishi Prakash suggested.

edited Dec 29 '14 at 11:52

answered Dec 29 '14 at 11:32

Nizar

481
5
8

I do not have any problem if i have just one string ,like "orderBy: 'RequestedOn'", it is working for ordering based on RequestedOn property, and it is also working if i use "orderBy: 'RequstedOn' | orderBy:'FirstName'". But it is not working if use array, like order:['RequestedOn','FirstName','LastName']--- as i said 'RequestedOn' is not the reason of syntax error – echo Dec 29 '14 at 11:44
I said that the problem is with vm.GetRequests() not RequestedOn. orderBy expression is fine. – Nizar Dec 29 '14 at 11:55
i use typescript and the generated javascript for function GetRequests() looks like: _ModelName.prototype.GetRequests = function() {...}_, i think this is the same as what you mean for $scope.requests = vm.GetRequests(), is it? – echo Dec 29 '14 at 12:15
I meant that ng-repeat won't work right in the way you're doing, use a scope variable if you don't really need a function. for more details see this post it will help you: http://stackoverflow.com/questions/12336897/how-to-loop-through-items-returned-by-a-function-with-ng-repeat – Nizar Dec 29 '14 at 13:20

angular orderBy multiple fields has syntax errors

2 Answers2