Wie Gruppe in Aurelia durch Filter tun

Question

Ich Art und Weise bin auf der Suche etwas wie

JS zu tun

$scope.players = [ 
    {name: 'Gene', team: 'alpha'}, 
    {name: 'George', team: 'beta'}, 
    {name: 'Steve', team: 'gamma'}, 
    {name: 'Paula', team: 'beta'}, 
    {name: 'Scruath', team: 'gamma'} 
]; 

HTML:

<ul repeat.for="obj of players | groupBy: 'team'"> 
    Group name: ${obj.group} 
    <li repeat.for="player of obj.values"> 
    player: ${player.name} 
    </li> 
</ul> 

Ist es möglich, zu tun ? Oder was ist der bessere Weg, diese Logik in Aurelia zu machen?

Answer 1

Sie können dies mit einem ValueConverter tun.

export class GroupByValueConverter { 
    toView(array, groupBy) { 

     var groups = {}; 

     array.forEach(function (o) { 
      var group = o[groupBy]; 
      groups[group] = groups[group] || []; 
      groups[group].push(o); 
     }); 

     return Object.keys(groups).map(function (group) { 
      return { 
       group: group, 
       values: groups[group] 
      }; 
     }) 
    } 
} 

Answer 2

Nachdem ich diese Antwort gefunden hatte, tat ich es auf eine etwas andere Art und Weise. Anstatt ein Array von Objekten mit group und value Tasten zu verwenden, habe ich eine Map verwendet.

aktualisiert Ansicht

<ul repeat.for="[group, values] of players | groupBy:'team'"> 
    Group name: ${group} 
    <li repeat.for="player of values"> 
    player: ${player.name} 
    </li> 
</ul> 

Für den Wert Konverter I this answer für Inspiration auf eine effiziente Art und Weise verwendet, um eine Gruppe von Operation auszuführen.

Value Converter

export class GroupByValueConverter { 
    toView(objects, key) { 
    return objects.reduce(
     (rv, x) => rv.set(x[key], (rv.get(x[key]) || []).concat(x)), 
     new Map() 
    ); 
    } 
} 

Answer 3

Eine Erweiterung des oben Valueconverter ermöglicht einen Gruppierungsfilter mit verschachtelten Objekteigenschaften (zB groupBy:. 'Team.id')

export class GroupByValueConverter { 
    toView(array, groupBy) { 

     var groups = {}; 
     var props = groupBy.split("."); 

     array.forEach(function (o) { 
      var group = o; 
      props.forEach(function (p) { group = group[p] }); 
      groups[group] = groups[group] || []; 
      groups[group].push(o); 
     }); 

     return Object.keys(groups).map(function (group) { 
      return { 
       group: group, 
       values: groups[group], 
      }; 
     }) 
    } 
} 

Noch eine andere Erweiterung, die es ermöglicht, ein Objekt als Gruppe anzugeben. Es braucht einen zweiten Parameter, um den Objektschlüssel anzugeben, der als Indexer verwendet werden soll.

z. - | groupBy: 'team': 'id' - | groupBy: 'projectMember.team': 'id'

export class GroupByValueConverter { 
    toView(array, groupBy, groupByKey) { 

     var groups = {}; 
     var groupMembers = {}; 
     var props = groupBy.split("."); 

     array.forEach(function (o) { 
      var group = o; 
      props.forEach(function (p) { group = group[p] }); 
      var index = groupByKey && group ? group[groupByKey] : group; 
      groups[index] = group; 
      groupMembers[index] = groupMembers[index] || []; 
      groupMembers[index].push(o); 
     }); 

     return Object.keys(groups).map(function (index) { 
      return { 
       group: groups[index], 
       values: groupMembers[index], 
      }; 
     }) 
    } 
}