Filtering a Loop

Ionic Framework ionic-v3
1

Hi Guys,

I have a list of provinces and would like to filter and group a response.

Currently, I have the following Array list:
public provList: Array = [“Gauteng”,
“Free State”,
“North West”,
“Eastern Cape”,
“KwaZulu-Natal”,
“Limpopo”,
“Mpumalanga”,
“Northern Cape”,
“Western Cape”];

I am pulling a list of contact people based on this list. What I need is to group all who fall under the same province, but I end up having duplicate provinces. My html code looks like this:

<ion-item-group *ngFor=“let item of ContactList”>

<ion-item-divider  color="light">{{item.ProvinceName}}</ion-item-divider>

<ion-item>{{item.Name}}</ion-item>
<ion-item>{{item.Email}}</ion-item>
<ion-item>{{item.TelephoneNumber}}</ion-item>

My question is: How do I group my output by province and make a list of everything else?

Appreciation in advance :slight_smile:

2

You can create a pipe:

$ionic g pipe filter-by-province

filter-by-province.ts:

import {Injectable, Pipe} from "@angular/core";

@Pipe({
  name: 'filterByProvince'
})
@Injectable()
export class FilterByProvince {

    transform(array: any[], filter: any): any {

        if (filter.provinceName == null || filter.provinceName === '' || array == null) {
            return array;
        }

        return array.filter(item => {
            let shouldInclude: boolean = item.provinceName === filter.provinceName;
            return filter.include ? shouldInclude : !shouldInclude;
        });

    }

}

and then use the filter twice. Once to show the items by province:

<ion-list>
    <ion-item *ngFor="let item of items | filterByProvince:{provinceName: provList[0], include: true}]" icon-left>
    ....
</ion-list>

and once to show the other items:

<ion-list>
    <ion-item *ngFor="let item of items | filterByProvince:{provinceName: provList[0], include: false}]" icon-left>
    ....
</ion-list>

I’m not in front of a computer to test, so forgive me any typo’s.

3

Amazing.
Thank you imediasolutions , seems to be working. Kind Regards
Mpaleng Mosese
Web Application Developer

4

Working same for Ionic 3 but seems not working.

5

@sonuyadav, please post your code or describe the error you get

6

see Ionic Pipes Filter not working