Data in Pipe is getting updated while filtering in Angular 2

Question

My JSON DATA:

 [
    {
    "Key":"Brochure",
    "Value":[{
            "Title":"Accounting Services",
            "service":"Accounting",
            "Location":["Aberdeen"],
            "Industry":["Accounting"],
            "Reprint":"Request",
            "Contact":"Mike Astrup",
            "Updated":"04/15/2017",
            "Owner":"EB",
            "Status":"Approved",
            "online":"true",
            "Type":"Material",
            "Url":".common/service"
        },
        {
            "Title":"Accounting Services",
            "service":"Accounting",
            "Location":["Accounting"],
            "Industry":["Accounting"],
            "Reprint":"Request",
            "Contact":"Mike Astrup 1",
            "Updated":"04/15/2017",
            "Owner":"EB",
            "Status":"Approved",
            "online":"true",
            "Type":"Material",
            "Url":".common/service"
        }]
    },
    {
    "Key":"Handout",
    "Value":[{
            "Title":"Accounting Services",
            "service":"Accounting",
            "Location":["Accounting"],
            "Industry":[""],
            "Reprint":"Request",
            "Contact":"Mike Astrup 2",
            "Updated":"04/15/2017",
            "Owner":"EB",
            "Status":"Approved",
            "online":"true",
            "Type":"Material",
            "Url":".common/service"
        },
        {
            "Title":"Accounting Services",
            "service":"Accounting",
            "Location":["Accounting"],
            "Industry":["Accounting"],
            "Reprint":"Request",
            "Contact":"Mike Astrup 3",
            "Updated":"04/15/2017",
            "Owner":"EB",
            "Status":"Approved",
            "online":"true",
            "Type":"Material",
            "Url":".common/service"
        },{
            "Title":"Accounting Services",
            "service":"Accounting",
            "Location":["Accounting"],
            "Industry":["","Health Care"],
            "Reprint":"Request",
            "Contact":"Mike Astrup 4",
            "Updated":"04/15/2017",
            "Owner":"EB",
            "Status":"Approved",
            "online":"true",
            "Type":"Material",
            "Url":".common/service"
        },{
            "Title":"Accounting Services",
            "service":"Accounting",
            "Location":["Accounting"],
            "Industry":["Accounting"],
            "Reprint":"Request",
            "Contact":"Mike Astrup 5",
            "Updated":"04/15/2017",
            "Owner":"EB",
            "Status":"Approved",
            "online":"true",
            "Type":"Material",
            "Url":".common/service"
        }]
    }
]

And I write a code in pipe Filter: ------ Custom Pipe Code is -----

transform(allData: any[], industry: any[], service:any[], location:any[],contact:any,owner:any,status:any, counter:any ): any {

var filteredArray = allData;

filteredArray = filteredArray.filter(item => {item.Value = item.Value.filter(innerItem => location.some(industryFilter =>innerItem.Industry.some(filterArr => {if(filterArr == industryFilter) return innerItem;})))});

... return filteredArray;

-----ends ---

and in my html file

<div class="tblArea" *ngFor="let item of allData|filterPipe:industryCheckBox:serviceCheckBox:locationCheckBox:contact:owner:status:counter">

...

when the data is returned from this pipe in filteredArray it also updates the allData in transform while I am not updating it.

Next time when I filter any data it will not filter from whole data it is just filtering form the filtered data.

Can someone please tell me why this is happening and How can I solve this issue.

Answer 1

It looks like you are setting your Value property to the filtered list here:

item.Value = item.Value.filter(...)

This will change the original value.

It's not actually a good idea to use a pipe for filtering. See the link here: https://angular.io/guide/pipes#appendix-no-filterpipe-or-orderbypipe

Rather, add code in your component to perform your filtering.

Here is an example:

import { Component, OnInit } from '@angular/core';

import { IProduct } from './product';
import { ProductService } from './product.service';

@Component({
    templateUrl: './product-list.component.html'
})
export class ProductListComponent implements OnInit {

    _listFilter: string;
    get listFilter(): string {
        return this._listFilter;
    }
    set listFilter(value: string) {
        this._listFilter = value;
        this.filteredProducts = this.listFilter ? this.performFilter(this.listFilter) : this.products;
    }

    filteredProducts: IProduct[];
    products: IProduct[] = [];

    constructor(private _productService: ProductService) {

    }

    performFilter(filterBy: string): IProduct[] {
        filterBy = filterBy.toLocaleLowerCase();
        return this.products.filter((product: IProduct) =>
              product.productName.toLocaleLowerCase().indexOf(filterBy) !== -1);
    }

    ngOnInit(): void {
        this._productService.getProducts()
                .subscribe(products => {
                    this.products = products;
                    this.filteredProducts = this.products;
                },
                    error => this.errorMessage = <any>error);
    }
}