Filtering a Loop


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”,
“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>


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

Appreciation in advance :slight_smile:


You can create a pipe:

$ionic g pipe filter-by-province


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

  name: 'filterByProvince'
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-item *ngFor="let item of items | filterByProvince:{provinceName: provList[0], include: true}]" icon-left>

and once to show the other items:

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

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


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


Working same for Ionic 3 but seems not working.


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


see Ionic Pipes Filter not working