javascript - portafolio - Cómo hacer un grupo por un filtro en Aurelia

portfolio filter html5

Question

Estoy buscando la manera de hacer algo como

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>

Es posible de hacer? ¿O cuál es la mejor manera de hacer esta lógica en Aurelia?

Answer 1

Puedes hacer esto usando un 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

Una extensión del ValueConverter anterior que permite usar un filtro de agrupación con propiedades de objetos anidados (por ejemplo, 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],
};
})
}
}

Aún otra extensión que permite especificar como grupo un objeto. Se necesita un segundo parámetro para especificar la clave del objeto que se utilizará como indexador.

p.ej. - | groupBy: ''equipo'': ''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],
};
})
}
}

Answer 3

Después de encontrar esta respuesta, lo hice de una manera ligeramente diferente. En lugar de usar una matriz de objetos con claves de group y value , utilicé un Map .

Vista actualizada

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

Para el convertidor de valor, utilicé esta respuesta como inspiración en una forma eficiente de realizar un grupo por operación.

Convertidor de valor

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