Filter array with subarray

Question

I'm having a problem creating a search filter, I use the * ngFor in the module and the name usually works like this:

(game.name.toLowerCase().includes(typed))

But the platforms that are coming in array only work when I put the index:

(game.platform[i].toLowerCase().includes(typed))

However this platform is dynamic and I can not use a for or something of the genre inside the filter

Json

[
    {
        "name":"GTA",
        "platform":[
            "xbox",
            "playstation"
        ]
    }
]

Component

<tr *ngFor="let game of (games | searchGame:SearchedText.value)">
    <td>{{game.name}}</td>
    <td>{{game.category}}</td>
    <td>{{game.platform | separator}}</td> 
    // "platform":["Playstation 4","Xbox One"]
    <td>{{game.price | currency}}</td>
    <td>{{game.quantity}}</td>
    <td>{{game.production ? 'Sim' : 'Não'}}</td>
    <td>{{game.description}}</td>
    <td><i class="fa fa-pencil icon" aria-hidden="true" (click)="staticModal.show()"></i></td>
    <td><i class="fa fa-times icon" aria-hidden="true" (click)="staticModal.show()"></i></td>
</tr>

Pipe

transform(game, typed){

    typed = typed.toLowerCase();

    return game.filter( game =>

        (game.name.toLowerCase().includes(typed)) ||

        (game.category.toLowerCase().includes(typed)) ||

        (game.platform.toLowerCase().includes(typed)) || // Error in this line

        (game.price.toLowerCase().includes(typed)) ||

        (game.quantity.toLowerCase().includes(typed)) ||

        (game.production.toLowerCase().includes(typed)) ||

        (game.description.toLowerCase().includes(typed))

    );


}

Answer 1

If I understand your question correctly, your filter is not doing what you want.

The first pipe parameter should be an array. I think just 'any' works but 'any[]' is more clean :-)

You are doing:

tranform(game: any,...)

Try this:

transform(game: any[], typed: string){

....

return game.filter(game => game.name.toLowerCase().indexOf(typed) > -1 ||
....

Further in the beginning your search token (typed) might be null or empty. For that you should add the following to return the array unfiltered. Otherwise you will not see anything in your *ngFor.

if (typed == null || typed == "")
    return game;

Hope this helps a little.

Edit: Replace the erroring line with

game.filter(game => game.platforms.some(el => el.toLocaleLowerCase().includes(typed)))