Angular pipe filter use with JSON

Question

My problem is that I want to use year filter in that place where I put the Name filter.

import { PipeTransform, Pipe } from '@angular/core';

import {index} from './index';

@Pipe({
    name:'bookFilter',
})

export class BookFilterPipe implements PipeTransform

{

    transform(value:index[],filterBy:any):index[]
    {
        filterBy=filterBy?filterBy.toLocaleLowerCase():null;
        return filterBy?value.filter((book:index)=>  

        book.Name.toLocaleLowerCase().indexOf(filterBy)!==-1):value  
        // here I want to use year filter in that line.
    }
}

So instead of `book.Name` you use `book.year` in your code example? What is the question? — DeborahK, Aug 24 '17 at 19:10
And also a note that it is not normally a good idea to use a pipe for filtering. See the docs here: https://angular.io/guide/pipes#appendix-no-filterpipe-or-orderbypipe — DeborahK, Aug 24 '17 at 19:11

DeborahK · Answer 1 · 2017-08-24T19:31:29.943

Maybe it would be helpful to understand what this code is doing so that you can change it as needed.

transform(value:index[],filterBy:any):index[]
{
    filterBy=filterBy?filterBy.toLocaleLowerCase():null;
    return filterBy?value.filter((book:index)=>  

    book.Name.toLocaleLowerCase().indexOf(filterBy)!==-1):value  
    // here I want to use year filter in that line.
}

The first line is handling the passed in filter criteria. If the filterBy variable is set, it converts it to lower case. This is needed with a string to ensure that the matching is case insensitive. If the filterBy variable is not set, filterBy is set to null. That is what the x ? y : z syntax does. If x is true it does y, otherwise it does z.

The second line is using the JavaScript filter function (you can find our more about that here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter)

It first rechecks the filterBy value because we could have set it to null on the first line. It is again using the x ? y : z syntax. If x is not set, it executes z, which is this case returns the original value. That makes sense because if there is no filterBy, you do want it to return the entire array.

If filterBy is set, it calls the JavaScript filter function on the value, which is the array to filter. The filter takes each element of the array and compares it using the provided arrow function. In this example, the arrow function is:

book.Name.toLocaleLowerCase().indexOf(filterBy)!==-1)

This line of code is using the book's name property and converting it to lower case for a case insensitive search. If you wanted to check a different property, here would be where you would specify it. And if you were comparing a number instead, you would not have to convert it to lower case.

The arrow function uses the JavaScript indexOf function to locate the location of the filterBy string in the provided property. In this case, it's looking for it in the book.Name. You can find out more about indexOf here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf

The indexOf returns a numeric value identifying where it found the filterBy string OR -1 if it is not found.

We don't really care where in the string it was found, we just care that it is !== to -1.

So that is what's going on with this code.

Hopefully that will make it easier to modify it as you need.

BUT NOTE: IT IS HIGHLY RECOMMENDED that you do NOT use a pipe to perform filtering.

I have an example of how to do filtering without a pipe using similar syntax to that described above here: Custom pipe to sort array of array

Angular pipe filter use with JSON

1 Answers1