Can not import custom pipes in Angular 2 while Grouping data

Question

I'm newbie to Angular JS.

I am using Angular 2 in my project.

My JSON data is in below

"locations": [
        {
         "id": "ASS",
        "name": "test center",
        "city": "Staten Island",
        "zip": "10301",
        "state" : "texas"
        },
        {
            "id": "ASD",
        "name": "test center1",
        "city": "Staten Island",
        "zip": "10301",
        "state" : "Florida"
        },
        {
            "id": "AAY",
        "name": "test center2",
        "city": "Staten Island",
        "zip": "10301",
        "state" : "Florida"
        },
        {
            {
            "id": "ASD",
        "name": "test center1",
        "city": "Staten Island",
        "zip": "10301",
        "state" : "Florida"
        }
    ],

I want to display data group by state.

texas   : <div>ASS</div>
florida : <div>ASD</div>
      <div>AAY</div>
      <div>ASD</div>

group.pipe.ts:

@Pipe({name: 'groupBy'})
export class GroupByPipe implements PipeTransform {
   transform(value: Array<any>, field: string): Array<any> {
    console.log('test');
    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] 
  }));

}

location.component.ts:

import {GroupByPipe} from '../group.pipe';
@NgModule({
  declarations : [GroupByPipe]
 })

My error :

Unhandled Promise rejection: Template parse errors:

The pipe 'groupBy' could not be found ("  <div class="col-sm-12 left_otr">
            <div class="col-md-6 col-sm-6 left" *ngFor="let [ERROR ->]item 
 of pagedItems | groupBy : 'state'">

How to solve this?

Possible duplicate of [How to group data in Angular 2 ?](https://stackoverflow.com/questions/37248580/how-to-group-data-in-angular-2) — Harsha Jayamanna, Nov 02 '17 at 10:17
Can you tell me where to define that data in the ts file? Already I have used ngFor :
but getting eror "The pipe 'groupBy' could not be found" — Meg, Nov 02 '17 at 10:20
what do you mean by that data? your questions are not clear. — Harsha Jayamanna, Nov 02 '17 at 10:22
I accept that my requirement is similar. But while applying that code i'm getting The pipe 'groupBy' could not be found.... — Meg, Nov 02 '17 at 10:33
please read the docs https://angular.io/guide/pipes#custom-pipes — Harsha Jayamanna, Nov 02 '17 at 10:34

Meg · Accepted Answer · 2017-11-03T11:55:33.423

Just Passed the array and field to the below code:

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

didn't used pipes.

updated my html as like below:

  <div *ngFor="let item1 of pagedItems">

                    <h1>{{item1.key}}</h1> 

                    <div *ngFor="let item of item1.value">
                         // my logic is here.
</div

Can not import custom pipes in Angular 2 while Grouping data

1 Answers1