Javascript / AngularJS - Convert string to number in orderBy

Question

I have a simple problem. When I try to order the ID, it's ordering like

1,12,13,2,20

So I think it assumes this as a string.

I tried to use number but with no help.

What can I do?

thead

<th class="text-center">
    Ticket ID&nbsp;
    <a uib-tooltip="Sort by" ng-click="vm.sortBy('TICKET_ID');">
        <i class="glyphicon glyphicon-sort pull-right"></i>
    </a>
</th>

body

 <tr class="text-center" ng-repeat="ticket in filteredTickets = (vm.tickets | 
     orderBy : vm.propertyName : vm.reverse | 
     filter : vm.search | 
     limitTo : vm.itemsPerPage : vm.itemsPerPage * (vm.currentPage-1))">                  
     <td>{{ticket.TICKET_ID | number}</td>
     <!-- 'number' doesn't help... -->

controller

// table ordering
vm.propertyName = 'TICKET_ID';
vm.reverse = false;

vm.sortBy = function(propertyName) {
    vm.reverse = !vm.reverse;
    vm.propertyName = propertyName;
};

what is the error? please edit your question. we do not know what you're asking — Philipp Sander
– Philipp Sander, Commented Jul 4, 2018 at 13:30
you either need to change the value from strings to numbers in your JSON, or you use a custom filter that will convert these values to numbers — Aleksey Solovey
– Aleksey Solovey, Commented Jul 4, 2018 at 13:32
I suspect that angular tries to apply default implementation of Array.sort, which by default translates values to strings, you can sort by manually writing something like a.prop1 - b.prop1 inside your sortBy function. — Yuriy Kravets
– Yuriy Kravets, Commented Jul 4, 2018 at 13:34
yes the JSON puts numbers as a string but I cannot change it server-side. What can I do? — user10031499
– user10031499, Commented Jul 4, 2018 at 13:36
change vm.tickets in your controller, or write a custom filter that will work as orderBy — Aleksey Solovey
– Aleksey Solovey, Commented Jul 4, 2018 at 13:39

NTP · Accepted Answer · 2018-07-04 13:42:06Z

3

Just convert string values to int and let orderBy filter of angularjs do the job for you

$scope.getNumber = function(row){
    return parseInt(row.TICKET_ID);
};

<tr class="text-center" ng-repeat="ticket in tickets | orderBy:getNumber:true">

also orderBy takes a second parameter (true / false) for asc / desc ordering

answered Jul 4, 2018 at 13:42

NTP

4,4483 gold badges18 silver badges25 bronze badges

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

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

2

You shouldn't use orderBy, nor filter in an angularJs app. In angular, both the pipes where removed, because (official docs):

Angular doesn't provide pipes for filtering or sorting lists. Developers familiar with AngularJS know these as filter and orderBy. There are no equivalents in Angular.

This isn't an oversight. Angular doesn't offer such pipes because they perform poorly and prevent aggressive minification. Both filter and orderBy require parameters that reference object properties. Earlier in this page, you learned that such pipes must be impure and that Angular calls impure pipes in almost every change-detection cycle.

Filtering and especially sorting are expensive operations. The user experience can degrade severely for even moderate-sized lists when Angular calls these pipe methods many times per second. filter and orderBy have often been abused in AngularJS apps, leading to complaints that Angular itself is slow. That charge is fair in the indirect sense that AngularJS prepared this performance trap by offering filter and orderBy in the first place.

Instead, implement a simple order and filtering logic in your controller and pass the data sorted and filtered to ng-repeat; now you can define exactly when and how ordering, filtering, ... should be done.

In your controller, converting is as easy as

Number(anyString);

...

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jul 4, 2018 at 13:50

baao

73.5k18 gold badges152 silver badges208 bronze badges

2 Comments

baao Over a year ago

haha @user10031499. I don't think it's a lot of work to write a sorting function - one nice thing about being a developer is that you can decide what quality you want to deliver...

Chayim Friedman Over a year ago

You can use the plus sign, +, as a shortcut (+anyString).

Collectives™ on Stack Overflow

Javascript / AngularJS - Convert string to number in orderBy

thead

body

controller

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

thead

body

controller

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related