typescript1.7 - How to group data in Angular 2 ? -


how can group data in angular 2 typescript. aware done using "group by" filter in angular 1.x, not getting how group data in angular 2. have array:

import {employee} './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" }         ]; 

and looking count employees department, like

department 1 has 4 employees

and on.

joining department id actual department (so can department name) story need figure out.

thanks in advance kinds of help.

you can use custom pipe described below:

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

and on template can write:

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

see corresponding plunker https://plnkr.co/edit/clnlh13ih4wasurdol4n?p=preview

hope helps you!


Comments

Popular posts from this blog

python Tkinter Capturing keyboard events save as one single string -

android - InAppBilling registering BroadcastReceiver in AndroidManifest -

javascript - VueJS2 and the Window Object - how to use? -