page - tablas dinamicas angular 4

¿Cómo agrupar datos en Angular 2?

Question

¿Cómo puedo agrupar datos en Angular 2 con TypeScript? Soy consciente de que esto se hace usando el filtro "agrupar por" en Angular 1.X, pero no obteniendo cómo agrupar datos en Angular 2. Tengo esta matriz:

import {Employee} from ''./employee'';
export var employees: Employee[];
employees = [
{ id: 1, firstName: "John", lastName: "Sonmez", department: 1, age: 24, address: "24/7, Working hours apartment, Cal. US", contactNumber: "[phone]" },
{ id: 2, firstName: "Mark", lastName: "Seaman", department: 2, age: 25, address: "32-C, Happy apartments, Block-9C, Cal. US", contactNumber: "[phone]" },
{ id: 3, firstName: "Jamie", lastName: "King", department: 3, age: 32, address: "54/II, Glorydale apartment, Cal. US", contactNumber: "[phone]" },
{ id: 5, firstName: "Jacob", lastName: "Ridley", department: 5, age: 24, address: "24/7, Working hours apartment, Cal. US", contactNumber: "[phone]" },
{ id: 6, firstName: "Peter", lastName: "Parker", department: 3, age: 25, address: "32-C, Happy apartments, Block-9C, Cal. US", contactNumber: "[phone]" },
{ id: 7, firstName: "Martin", lastName: "Luther", department: 4, age: 32, address: "54/II, Glorydale apartment, Cal. US", contactNumber: "[phone]" },
{ id: 8, firstName: "Raghav", lastName: "Kumar", department: 1, age: 34, address: "51/C Shivalik, Cal. US", contactNumber: "[phone]" },
{ id: 9, firstName: "Narayan", lastName: "Sonmez", department: 3, age: 24, address: "24/7, Working hours apartment, Cal. US", contactNumber: "[phone]" },
{ id: 10, firstName: "Russell", lastName: "Andre", department: 2, age: 25, address: "32-C, Happy apartments, Block-9C, Cal. US", contactNumber: "[phone]" },
{ id: 11, firstName: "Ramona", lastName: "King", department: 4, age: 32, address: "54/II, Glorydale apartment, Cal. US", contactNumber: "[phone]" },
{ id: 12, firstName: "Andre", lastName: "Russell", department: 1, age: 34, address: "51/C Shivalik, Cal. US", contactNumber: "[phone]" },
{ id: 13, firstName: "Nathan", lastName: "Leon", department: 1, age: 24, address: "24/7, Working hours apartment, Cal. US", contactNumber: "[phone]" },
{ id: 14, firstName: "Brett", lastName: "Lee", department: 5, age: 25, address: "32-C, Happy apartments, Block-9C, Cal. US", contactNumber: "[phone]" },
{ id: 15, firstName: "Tim", lastName: "Cook", department: 2, age: 32, address: "54/II, Glorydale apartment, Cal. US", contactNumber: "[phone]" },
{ id: 16, firstName: "Steve", lastName: "Jobs", department: 5, age: 34, address: "51/C Shivalik, Cal. US", contactNumber: "[phone]" }
];

y estoy buscando contar a los empleados por departamento, como

El departamento 1 tiene 4 empleados

y así.

Unir la identificación del departamento con el departamento real (para poder obtener el nombre del departamento) es otra historia que necesito descubrir.

Answer 1

Puede usar una tubería personalizada para hacerlo como se describe a continuación:

@Pipe({name: ''groupBy''})
export class GroupByPipe implements PipeTransform {
transform(value: Array<any>, field: string): Array<any> {
const groupedObj = value.reduce((prev, cur)=> {
if(!prev[cur[field]]) {
prev[cur[field]] = [cur];
} else {
prev[cur[field]].push(cur);
}
return prev;
}, {});
return Object.keys(groupedObj).map(key => ({ key, value: groupedObj[key] }));
}
}

Y luego en tu plantilla puedes escribir:

<div *ngFor="let item of employees | groupBy:''department''">
Department {{ item.key }} has {{ item.value.length }} employees
</div>

Consulte también el plunker correspondiente https://plnkr.co/edit/cLnlH13IH4WAsuRdol4n?p=preview

Espero que te ayude!

Answer 2

Puede usar ngx-pipes https://github.com/danrevah/ngx-pipes#groupby

this.arrayObject = [
{id: 1, elm: ''foo'', value: 0},
{id: 2, elm: ''bar'', value: 1},
{id: 3, elm: ''foo'', value: 2},
{id: 4, elm: ''foo'', value: 2}
];
this.arrayNestedObject = [
{id: 1, prop: { deep: ''foo'' }},
{id: 2, prop: { deep: ''bar'' }},
{id: 3, prop: { deep: ''foo'' }},
{id: 4, prop: { deep: ''bar'' }}
];

<p>{{ arrayObject | groupBy: ''elm'' }}</p>
<!-- Output: "{foo: [{id: 1, elm: ''foo'', value: 0}, {id: 3, elm: ''foo'', value: 2}, {id: 4, elm: ''foo'', value: 2}], bar: [{id: 2, elm: ''bar'', value: 1}]}" -->

Answer 3

var dept = employees.map((m) => m.department).filter((f, i, ar) => ar.indexOf(f) === i);
console.log(dept);
var group = employees.reduce((accumulator, item, i, arr) => {
if (dept.length) {
var pop = dept.shift();
var list = arr.filter((f) => f.department == pop);
accumulator.push(...list);
}
return accumulator;
}, []);
console.log(group);