按属性排序对象数组

Mic*_*ael 10 javascript angularjs angularjs-filter

我有来自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 }]
Run Code Online (Sandbox Code Playgroud)

我需要通过TypeId增加对这些项目进行排序.

像那样:

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 }
Run Code Online (Sandbox Code Playgroud)

JavaScript中是否有内置函数可以按属性对对象数组进行排序?

Pan*_*kar 33

你可以使用orderBy过滤器.

var itemsSorted  = $filter('orderBy')(items, 'TypeId')
Run Code Online (Sandbox Code Playgroud)

在视图上

ng-repeat="item in items | orderBy: 'TypeId'"
Run Code Online (Sandbox Code Playgroud)

默认情况下,过滤器是升序的(显式的+TypeId),您可以使用-TypeId它来降序.


额外的东西

如果您想按多个属性排序,那么请使用数组而不是string像['TypeId', 'Name']

ng-repeat="item in items | orderBy: ['TypeId', 'Name']"
Run Code Online (Sandbox Code Playgroud)

在控制器内部进行手动过滤时,可以获得很大的性能优势.其中,视图上的过滤速度较慢,因为ng-repeat每次消化周期触发时它都会评估表达式和绑定.通常,您不会在小型集合中看到任何性能损失,但在更大的集合中,您将看到对视图的过滤将变得缓慢.


brk*_*brk 6

您可以使用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);
Run Code Online (Sandbox Code Playgroud)

JSFIDDLE示例


Ori*_*ori 5

您可以使用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);
Run Code Online (Sandbox Code Playgroud)
<pre id="demo"></pre>
Run Code Online (Sandbox Code Playgroud)