OrderBy with accents

Question

OrderBy with accents

Navigation

#1 by (3 votes)
#2 by (1 votes)

1

I'm trying to sort out a map with some data, but I can not sort words with accents. They always come last, I need a suggestion to get a map sorted.

Follow the code:

(function(angular) {
  'use strict';
angular.module('orderByExample', [])
  .controller('ExampleController', ['$scope', '$filter', function($scope, $filter) {
    var orderBy = $filter('orderBy');
    $scope.friends = [
      { name: 'John',    phone: '555-1212',    age: 10 },
      { name: 'Ádan',    phone: '555-9876',    age: 19 },
      { name: 'Mike',    phone: '555-4321',    age: 21 },
      { name: 'Adam',    phone: '555-5678',    age: 35 },
      { name: 'Julie',   phone: '555-8765',    age: 29 }
    ];
   
    $scope.order = function(predicate, reverse) {
      $scope.friends = orderBy($scope.friends, predicate, reverse);
    };
    $scope.order('-age',false);
  }]);
})(window.angular);

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-example105-production</title>
  

  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.0/angular.min.js"></script>
  <script src="script.js"></script>
  

  
</head>
<body ng-app="orderByExample">
  <div ng-controller="ExampleController">
  <table class="friend">
    <tr>
      <th><a href="" ng-click="reverse=false;order('name', false)">Name</a>
        (<a href="" ng-click="order('-name',false)">^</a>)</th>
      <th><a href="" ng-click="reverse=!reverse;order('phone', reverse)">Phone Number</a></th>
      <th><a href="" ng-click="reverse=!reverse;order('age',reverse)">Age</a></th>
    </tr>
    <tr ng-repeat="friend in friends">
      <td>{{friend.name}}</td>
      <td>{{friend.phone}}</td>
      <td>{{friend.age}}</td>
    </tr>
  </table>
</div>
</body>
</html>

javascript angularjs json

asked by anonymous 15.10.2015 / 21:21

2 answers

1

I'm not going to be able to help you with AngularJS, but I'll give you an example that might come in handy.

How much do you try to sort an Array with names, actually the accent names go to the end of the list:

var nomes = ["Adalto", "Carlos", "Ádalto", "Zuleica", "Benicio"];
var order = nomes.sort(function (nomeA, nomeB) {
  return nomeA > nomeB;
})

console.log(order);

In the above example we have the following output:

Input: ["Adalto", "Carlos", "Ádalto", "Zuleica", "Benicio"]
Output: ["Adalto", "Benicio", "Carlos", "Zuleica", "Ádalto"]

But we can use a LocaleCompare and modify the sensitivity to ignore accents.

var nomes = ["Adalto", "Carlos", "Ádalto", "Zuleica", "Benicio"];
var order = nomes.sort(function (nomeA, nomeB) {
  return nomeA.localeCompare(nomeB, "standard", { sensitivity: "base" });
})

console.log(order);

You can set the sensitivity according to your need:

base : case insensitive and accent insensitive;

accent : case insensitive and accent sensitive;

case : case sensitive and accent insensitive;

variant : case sensitive and accent sensitive; default

15.10.2015 / 21:45

Query by month and year (Php + SQL) Extensive array causes the program to stop working

score 3 · Accepted Answer

You can use a custom filter to sort. See the example:

.filter('ordenar',function(){
    return function (items, predicate, reverse) {
        items.sort(function (a, b) {
            return a[predicate].localeCompare(b[predicate]);
        });
    return items;
};

(function(angular) {
    'use strict';
    angular.module('orderByExample', [])
    .controller('ExampleController', ['$scope', '$filter', function($scope, $filter) {
        var orderBy = $filter('orderBy');
        $scope.friends = [
            { name: 'John',    phone: '555-1212',    age: 10 },
            { name: 'Ádan',    phone: '555-9876',    age: 19 },
            { name: 'Mike',    phone: '555-4321',    age: 21 },
            { name: 'Adam',    phone: '555-5678',    age: 35 },
            { name: 'Julie',   phone: '555-8765',    age: 29 }
        ];
        
        $scope.order = function(predicate, reverse) {
            $scope.friends = $filter("ordenar")($scope.friends, predicate, reverse);
        };
      
    }]).filter('ordenar',function(){
        return function (items, predicate, reverse) {
            
            items.sort(function (a, b) {
                console.log(predicate)
                return a[predicate].localeCompare(b[predicate]);
            });
            return items;
        }; 
    })
})(window.angular);

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example - example-example105-production</title>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.0/angular.min.js"></script>
    <script src="script.js"></script>
</head>
<body ng-app="orderByExample">
    <div ng-controller="ExampleController">
        <table class="friend">
            <tr>
                <th><a href="" ng-click="reverse=false;order('name', false)">Name</a>
                    (<a href="" ng-click="order('name',false)">^</a>)</th>
                    <th><a href="" ng-click="reverse=!reverse;order('phone', reverse)">Phone Number</a></th>
                    <th><a href="" ng-click="reverse=!reverse;order('age',reverse)">Age</a></th>
                </tr>
                <tr ng-repeat="friend in friends">
                    <td>{{friend.name}}</td>
                    <td>{{friend.phone}}</td>
                    <td>{{friend.age}}</td>
                </tr>
            </table>
        </div>
    </body>
</html>