Come fare gruppo da filtro nel Aurelia

Question

sto cercando modo per fare qualcosa di simile

JS

$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> 

E 'possibile fare ? O quale è il modo migliore di fare questa logica in modo Aurelia?

Answer 1

È possibile farlo utilizzando uno ValueConverter.

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

Dopo aver trovato questa risposta, l'ho fatto in un modo leggermente diverso. Invece di utilizzare una serie di oggetti con le chiavi group e value, ho utilizzato uno Map.

vista aggiornato

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

Per il convertitore valore ho usato this answer ispirazione su un modo efficiente per eseguire un gruppo operazione.

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

Un'estensione del ValueConverter detto che consente di utilizzare un filtro raggruppamento con proprietà degli oggetti nidificati (es 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], 
      }; 
     }) 
    } 
} 

Ancora un'altra estensione che consente di specificare come gruppo un oggetto. Prende un secondo parametro per specificare la chiave dell'oggetto da utilizzare come indicizzatore.

es. - | 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], 
      }; 
     }) 
    } 
}