Angular 2 pipe transform null check before converting to string

Question

I am quite new to Typescript and trying to create my first Pipe. I have it working on multiple fields, but I have one issue with it - there is one field that can possibly contain null values, and I am not sure what syntax to use to make this check. Here is my code :

    import { PipeTransform, Pipe } from '@angular/core';
import { IFixture } from '../shared/entities/fixture';

@Pipe({
    name: 'fixtureFilter'
})

export class FixtureFilterPipe implements PipeTransform {

    transform(value: IFixture[], filterBy: string): IFixture[] {
        /** check filter string is passed in and if so convert to lower case */
        filterBy = filterBy ? filterBy.toLocaleLowerCase() : null;

        /** indexOf checks if string is found, else do not filter  */
        return filterBy ? value.filter((fixture: IFixture) =>

            (fixture.homeTeam.teamName.toLocaleLowerCase().indexOf(filterBy) !== -1) ||
            (fixture.awayTeam.teamName.toLocaleLowerCase().indexOf(filterBy) !== -1) ||
            (fixture.week.weekNumber.toLocaleLowerCase().indexOf(filterBy) !== -1) ||
            (fixture.homeTeamScore.toString().toLocaleLowerCase().indexOf(filterBy) !== -1) ||
            (fixture.awayTeamScore.toString().toLocaleLowerCase().indexOf(filterBy) !== -1) ||
            (fixture.tournament.tournamentName.substr(fixture.tournament.tournamentName.length - 4).indexOf(filterBy) !== -1))
            : value;
    }
}

homeTeamScore and awayTeamScore above are number types that can be null, and I have to convert them to strings to use them in the filter. What would be the correct syntax to use to only convert to string if they are not null?

The error I get is 'Cannot read property 'toString' of null' on this line :

(fixture.homeTeamScore.toString().toLocaleLowerCase().indexOf(filterBy) !== -1)

Here is some sample JSON data as requested :

[{"fixtureId":8,"tournamentId":2,"tournament":{"tournamentId":2,"tournamentName":"League 2023","seasonId":18,"season":{"seasonId":18,"seasonName":"2023"}},"weekId":11,"week":{"weekId":11,"weekNumber":"11"},"awayTeamId":43,"awayTeam":{"teamId":43,"teamName":"New York Jets","logoImage":"http://url/app/assets/images/logos/nyjets.png","headerImage":"http://url/app/assets/images/headers/nyjets.png","coachImage":"http://url/app/assets/images/coaches/nyjets.png","cheerleaderImage":"http://url/app/assets/images/cheerleaders/nyjets.png","divisionId":7,"division":null,"coachId":81,"coach":null},"homeTeamId":32,"homeTeam":{"teamId":32,"teamName":"Houston Texans","logoImage":"http://url/app/assets/images/logos/houston.png","headerImage":"http://url/app/assets/images/headers/houston.png","coachImage":"http://url/app/assets/images/coaches/houston.png","cheerleaderImage":"http://url/app/assets/images/cheerleaders/houston.png","divisionId":6,"division":null,"coachId":87,"coach":null},"awayTeamScore":31,"homeTeamScore":16,"isOvertime":false},{"fixtureId":21,"tournamentId":2,"tournament":{"tournamentId":2,"tournamentName":"League 2023","seasonId":18,"season":{"seasonId":18,"seasonName":"2023"}},"weekId":2,"week":{"weekId":2,"weekNumber":"2"},"awayTeamId":38,"awayTeam":{"teamId":38,"teamName":"Miami Dolphins","logoImage":"http://url/app/assets/images/logos/miami.png","headerImage":"http://url/app/assets/images/headers/miami.png","coachImage":"http://url/app/assets/images/coaches/miami.png","cheerleaderImage":"http://url/app/assets/images/cheerleaders/miami.png","divisionId":7,"division":null,"coachId":82,"coach":null},"homeTeamId":43,"homeTeam":{"teamId":43,"teamName":"New York Jets","logoImage":"http://url/app/assets/images/logos/nyjets.png","headerImage":"http://url/app/assets/images/headers/nyjets.png","coachImage":"http://url/app/assets/images/coaches/nyjets.png","cheerleaderImage":"http://url/app/assets/images/cheerleaders/nyjets.png","divisionId":7,"division":null,"coachId":81,"coach":null},"awayTeamScore":21,"homeTeamScore":55,"isOvertime":false}]

EDIT : Fixed, turned out to be a simple enough solution :

transform(value: IFixture[], filterBy: string): IFixture[] {
    /** check filter string is passed in and if so convert to lower case */
    filterBy = filterBy ? filterBy.toLocaleLowerCase() : null;

    /** indexOf checks if string is found, else do not filter  */
    return filterBy ? value.filter((fixture: IFixture) =>

        (fixture.homeTeam.teamName.toLocaleLowerCase().indexOf(filterBy) !== -1) ||
        (fixture.awayTeam.teamName.toLocaleLowerCase().indexOf(filterBy) !== -1) ||
        (fixture.week.weekNumber.toLocaleLowerCase().indexOf(filterBy) !== -1) ||
        (fixture.homeTeamScore !== null ? fixture.homeTeamScore.toString().toLocaleLowerCase().indexOf(filterBy) !== -1 : false) ||
        (fixture.awayTeamScore !== null ? fixture.awayTeamScore.toString().toLocaleLowerCase().indexOf(filterBy) !== -1 : false) ||
        (fixture.tournament.tournamentName.substr(fixture.tournament.tournamentName.length - 4).indexOf(filterBy) !== -1))
        : value;
}

what error are you getting? also update your post with the json data. — Aravind, Jan 12 '17 at 17:57
where you are using this pipe. please update the **error along with causing line** and **html** component along with this **sample json data** — Aravind, Jan 12 '17 at 18:02

score 0 · Answer 1 · edited May 23 '17 at 12:25

0

Firstly, Have a look at the below line

transform(value: IFixture[], filterBy: string): IFixture[] {

Mostly input and output to the pipe will not be array object. Hence, First fix it to below

transform(value: IFixture, filterBy: string): IFixture {

If you can update your post with json data. I can help you out. Also have a look at this answer which is of similar one.

edited May 23 '17 at 12:25

Community

1
1

answered Jan 12 '17 at 18:19

Aravind

40,391
16
91
110

JSON data added to post. Please note that the posted code does work fine except for when there are null values in homeTeamScore or awayTeamScore, I just need to be able to make a null check before applying toString, but I am not sure of the syntax. – user517406 Jan 12 '17 at 19:03

Angular 2 pipe transform null check before converting to string

1 Answers1