Qfyilyi

I am building a multi search filter using angular 2. I can filter based on multiple filters using check boxes. The filters are applied perfectly based on what manufacturer, model, colour is selected.

I am looping through my array cars to draw my filters using *ngFor="let filters of filtersToDisplay" but i don't want to loop through the group of filters which are being selected, So i can apply more filters from the same group i.e manufacturer?

Here is my example: https://stackblitz.com/edit/angular-tenpga?file=src%2Fapp%2Fapp.component.ts

I use ng-for directive to build the filters see below:

<div style="padding:5px;" *ngFor="let filters of filtersToDisplay">

<input id="chkManufacturer" name="manufacturer" value=" 

{{filters.manufacturer}}" (change)="change($event)" type="checkbox" /> 

{{filters.manufacturer}}

</div>



<br />

<div style="padding:5px;" *ngFor="let filters of filtersToDisplay">

<input id="chkModel" name="model" (change)="change($event)" value=" 

{{filters.model}}" type="checkbox" />{{filters.model}}

</div>



<br />

<div style="padding:5px;" *ngFor="let filters of filtersToDisplay">

<input id="chkColour" name="colour" (change)="change($event)" value=" 

{{filters.colour}}" type="checkbox" />{{filters.colour}}

</div>



<table>

<thead>

    <tr>

        <th>Manufacturer</th>

        <th>Model</th>

        <th>Range</th>

        <th>Price</th>

        <th>Fuel</th>

        <th>Year</th>

        <th>Transmisson</th>

    </tr>

</thead>

<tbody>

    <ng-container *ngFor="let car of carsToDisplay">

        <tr>

            <td>{{car.manufacturer}}</td>

            <td>{{car.model}}</td>

            <td>{{car.range}}</td>

            <td>{{car.price | currency:'GBP':true:'1.3-3'}}</td>

            <td>{{car.fuel}}</td>

            <td>{{car.year}}</td>

            <td>{{car.transmisson}}</td>

        </tr>

    </ng-container>

    <tr *ngIf="!cars || cars.length==0">

        <td colspan="7">No cars to display</td>

    </tr>

</tbody>

</table>

Here is my array of cars and change event when a check box is selected

Here is TS file:

selectedValue = ;

filterArr = ;



    cars = [

        { code: 'car101', manufacturer: 'BMW', model: '3 Series', range: '320d M sport', price: 20000, fuel: 'Diesel', year: 2018, transmisson: 'Manual', colour: 'White'},

        { code: 'car102', manufacturer: 'Honda', model: 'Civic', range: 'Type R', price: 30000, fuel: 'Petrol', year: 2017, transmisson: 'Automatic', colour: 'Black'},

        { code: 'car103', manufacturer: 'Mercedes', model: 'A Class', range: 'AMG SPort', price: 50000, fuel: 'Petrol', year: 2018, transmisson: 'Automatic', colour: 'Red'},

        { code: 'car104', manufacturer: 'Audi', model: 'A3', range: 'TFSI Quattro S Line', price: 20000, fuel: 'Diesel', year: 2018, transmisson: 'Automatic', colour: 'Grey'},

        { code: 'car105', manufacturer: 'Ford', model: 'Focus', range: 'ST', price: 50000, fuel: 'Petrol', year: 2016, transmisson: 'Automatic', colour: 'Black'},

    ]



carsToDisplay = this.cars;



filtersToDisplay = this.cars;



change(e) {

    if (e.target.checked) {

        if (!this.filterArr.hasOwnProperty(e.srcElement.name))

            this.filterArr[e.srcElement.name] = [e.target.value];

        else

            this.filterArr[e.srcElement.name].push(e.target.value);



        this.carsToDisplay = multiFilter(this.cars, this.filterArr);



        this.filtersToDisplay = Filter(this.cars, this.filterArr);



    }

    else

    {

        if (this.filterArr[e.srcElement.name]) {

            let index = 

   this.filterArr[e.srcElement.name].indexOf(e.target.value)

            this.filterArr[e.srcElement.name].splice(index, 1)

        }



        removeEmptyObjects(this.filterArr);



        this.carsToDisplay = multiFilter(this.cars, this.filterArr);



        this.filtersToDisplay = Filter(this.cars, this.filterArr);

    }



    function removeEmptyObjects(obj) {

        for (var propName in obj) {

            if (obj[propName] === null || obj[propName] === undefined || 

   obj[propName].length == 0) {

                delete obj[propName];

            }

        }

    }



    function multiFilter(array, filters) {

        if (Object.keys(filters))

        return array.filter(o => 

            Object.keys(filters).every(k =>

                .concat(filters[k]).some(v => o[k].includes(v))));

    }



    function Filter(array, filters) {

        console.log(Object.keys(filters));

        if (Object.keys(filters))

            return array.filter(o =>

                Object.keys(filters).every(k =>

                    .concat(filters[k]).some(v => o[k].includes(v))));

    }



}

Hope this makes sense? I am very new to angular so would appreciate the best way to solve this.