web-dev-qa-db-fra.com

Tri d'un tableau d'objets par propriétés

J'ai cette collection de DataBase:

var items = [{ 'Name':'Michael', 'TypeId':1 }
        { 'Name':'Max', 'TypeId':1 }
        { 'Name':'Andre', 'TypeId':1 }
        { 'Name':'Georg', 'TypeId':2 }
        { 'Name':'Greg', 'TypeId':3 }
        { 'Name':'Mitchell', 'TypeId':2 }
        { 'Name':'Ptro', 'TypeId':1 }
        { 'Name':'Helga', 'TypeId':1 }
        { 'Name':'Seruin', 'TypeId':2 }
        { 'Name':'Ann', 'TypeId':3 }
        { 'Name':'Marta', 'TypeId':2 }]

Je dois trier ces éléments par TypeId croissant.

Comme ça:

var itemsSorted = [{ 'Name':'Michael', 'TypeId':1 }
        { 'Name':'Max', 'TypeId':1 }
        { 'Name':'Andre', 'TypeId':1 }
        { 'Name':'Ptro', 'TypeId':1 }
        { 'Name':'Helga', 'TypeId':1 }
        { 'Name':'Georg', 'TypeId':2 }
        { 'Name':'Mitchell', 'TypeId':2 }
        { 'Name':'Marta', 'TypeId':2 }]
        { 'Name':'Seruin', 'TypeId':2 }
        { 'Name':'Greg', 'TypeId':3 }
        { 'Name':'Ann', 'TypeId':3 }

Existe-t-il une fonction intégrée dans JavaScript permettant de trier un tableau d'objets par propriété? 

javascriptangularjsangularjs-filter
8
Michael

Vous pouvez utiliser le filtre orderBy.

var itemsSorted  = $filter('orderBy')(items, 'TypeId')

En vue 

ng-repeat="item in items | orderBy: 'TypeId'"

Par défaut, les filtres sont ascendants (explicite serait +TypeId), vous pouvez utiliser -TypeId pour le rendre décroissant.

Trucs supplémentaires

Si vous voulez trier plusieurs propriétés, utilisez donc array au lieu de string comme ['TypeId', 'Name'].

ng-repeat="item in items | orderBy: ['TypeId', 'Name']"

Lorsque vous effectuez un filtrage manuel dans le contrôleur, vous bénéficiez de gros avantages en termes de performances. où filtrer à l'affichage est plus lent car il évalue ng-repeat express et les liaisons chaque fois que le cycle de digestion est déclenché. En règle générale, vous ne verrez aucune perte de performances dans une petite collection, mais dans une plus grande collection, le filtrage à l'écran fonctionnera lentement.

30
Pankaj Parkar

Vous pouvez utiliser Array.prototype.sort :

var items = [{ 'Name':'Michael', 'TypeId':1 },
        { 'Name':'Max', 'TypeId':1 },
        { 'Name':'Andre', 'TypeId':1 },
        { 'Name':'Georg', 'TypeId':2 },
        { 'Name':'Greg', 'TypeId':3 },
        { 'Name':'Mitchell', 'TypeId':2 },
        { 'Name':'Ptro', 'TypeId':1 },
        { 'Name':'Helga', 'TypeId':1 },
        { 'Name':'Seruin', 'TypeId':2 },
        { 'Name':'Ann', 'TypeId':3 },
        { 'Name':'Marta', 'TypeId':2 }];


items.sort(function(a, b) { return a.TypeId - b.TypeId; })

console.table(items);

document.getElementById('demo').innerHTML = JSON.stringify(items, null, 4);
<pre id="demo"></pre>

4
Ori Drori

Vous pouvez utiliser la fonction js sort & ternary operator

var items = [{ 'Name':'Michael', 'TypeId':1 },
            { 'Name':'Max', 'TypeId':1 },
            { 'Name':'Andre', 'TypeId':1 },
            { 'Name':'Georg', 'TypeId':2 },
            { 'Name':'Greg', 'TypeId':3 },
            { 'Name':'Mitchell', 'TypeId':2 },
            { 'Name':'Ptro', 'TypeId':1 },
            { 'Name':'Helga', 'TypeId':1 },
            { 'Name':'Seruin', 'TypeId':2 },
            { 'Name':'Ann', 'TypeId':3 },
            { 'Name':'Marta', 'TypeId':2 }]
    var sortedArray = items.sort(function(a,b){
     return a.TypeId >b.TypeId?1:a.TypeId <b.TypeId?-1:0
    })
    console.log(sortedArray);

Exemple JSFIDDLE

4
brk

Dans un template:

<li ng-repeat="item in items | orderBy:'TypeId'">...</li>

Dans un contrôleur/service:

vm.sortedItems = $filter('orderBy')(items, 'TypeId');
3
GG.