Orderby with accents

Asked

Viewed 1,088 times

1

I’m trying to sort a map with some data, but I can’t sort the words with accents. They always come last, I need a hint to sort a map.

Follows 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 json angularjs accentuation

  • See: http://answall.com/questions/3994/como-fazer-uma-busca-ignorando-acentua%C3%A7%C3%A3o-em-javascript

2 answers

3


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>

  • Can anyone explain why I was negative?

1

I won’t be able to help you with Angularjs, but I’ll try to give you an example that might come in handy.

When you try to sort an array with names, really the names with Accento 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 example above we have the following output:

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

But we can use a LocaleCompare and change 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 sensitivity according to your need:

  1. base: case insensitive and Accent insensitive;
  2. accent: case insensitive and Accent sensitive;
  3. case: case sensitive and Accent insensitive;
  4. variant: case sensitive and Accent sensitive; default

Browser other questions tagged javascript json angularjs accentuation

You are not signed in. Login or sign up in order to post.