web-dev-qa-db-fra.com

Comment regrouper des données dans Angular 2?

Comment regrouper des données dans Angular 2 avec TypeScript. Je suis conscient que cela est fait en utilisant le filtre "groupe par" dans Angular 1.X, mais sans comment grouper les données dans Angular 2. J'ai ce tableau:

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: "+968546215789" },
            { id: 2, firstName: "Mark", lastName: "Seaman", department: 2, age: 25, address: "32-C, Happy apartments, Block-9C, Cal. US", contactNumber: "+968754216984" },
            { id: 3, firstName: "Jamie", lastName: "King", department: 3, age: 32, address: "54/II, Glorydale apartment, Cal. US", contactNumber: "+967421896326" },

            { id: 5, firstName: "Jacob", lastName: "Ridley", department: 5, age: 24, address: "24/7, Working hours apartment, Cal. US", contactNumber: "+968546215789" },
            { id: 6, firstName: "Peter", lastName: "Parker", department: 3, age: 25, address: "32-C, Happy apartments, Block-9C, Cal. US", contactNumber: "+968754216984" },
            { id: 7, firstName: "Martin", lastName: "Luther", department: 4, age: 32, address: "54/II, Glorydale apartment, Cal. US", contactNumber: "+967421896326" },
            { id: 8, firstName: "Raghav", lastName: "Kumar", department: 1, age: 34, address: "51/C Shivalik, Cal. US", contactNumber: "+967842569842" },

            { id: 9, firstName: "Narayan", lastName: "Sonmez", department: 3, age: 24, address: "24/7, Working hours apartment, Cal. US", contactNumber: "+968546215789" },
            { id: 10, firstName: "Russell", lastName: "Andre", department: 2, age: 25, address: "32-C, Happy apartments, Block-9C, Cal. US", contactNumber: "+968754216984" },
            { id: 11, firstName: "Ramona", lastName: "King", department: 4, age: 32, address: "54/II, Glorydale apartment, Cal. US", contactNumber: "+967421896326" },
            { id: 12, firstName: "Andre", lastName: "Russell", department: 1, age: 34, address: "51/C Shivalik, Cal. US", contactNumber: "+967842569842" },

            { id: 13, firstName: "Nathan", lastName: "Leon", department: 1, age: 24, address: "24/7, Working hours apartment, Cal. US", contactNumber: "+968546215789" },
            { id: 14, firstName: "Brett", lastName: "Lee", department: 5, age: 25, address: "32-C, Happy apartments, Block-9C, Cal. US", contactNumber: "+968754216984" },
            { id: 15, firstName: "Tim", lastName: "Cook", department: 2, age: 32, address: "54/II, Glorydale apartment, Cal. US", contactNumber: "+967421896326" },
            { id: 16, firstName: "Steve", lastName: "Jobs", department: 5, age: 34, address: "51/C Shivalik, Cal. US", contactNumber: "+967842569842" }
        ];

et je cherche à compter les employés par département, comme

Le département 1 compte 4 employés

etc.

Joindre l’identité de département avec le département actuel (afin que je puisse obtenir le nom du département) est une autre histoire que je dois comprendre.

angulartypescript1.7
21
sdeep

Vous pouvez utiliser pipe personnalisée pour le faire comme décrit ci-dessous:

@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] }));
  }
}

Et puis sur votre modèle, vous pouvez écrire:

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

Voir aussi le dossier correspondant https://plnkr.co/edit/cLnlH13IH4WAsuRdol4n?p=preview

J'espère que ça vous aide!

49
yurzui
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);
0
Farhaan

Vous pouvez utiliser 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}]}" -->

0
user3573136