How to create a Pipe by filtering a list of items, where there is an array of objects in this list? Is it possible to filter this object array as well?

Asked

Viewed 43 times

0

I’d like some help with a pipe. The purpose of the pipe is to filter into a list of vehicle advertisements some properties. For example: brand, fuel, type and etc. So far everything works, but I also need to filter the options, which is an array of objects. Here is a summary of the pipe (with some attempts in comment):

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
    name: 'filterDataVeiculo'
})

export class FilterDataVeiculoPipe implements PipeTransform {
    transform(items: Array<any>, tipoSearch: string, marcaSearch: any=[], 
    combustivelSearch: string, cambioSearch: string,
    opcionalSearch: any=[], modeloSearch: string, estadoSearch: string, cidadeSearch: string){
        //pcdSearch: boolean, 
        if(items && items.length){
            return items.filter(item => {
                if(marcaSearch && item.veiculo.marca.nome.toLowerCase().indexOf(marcaSearch.nome.toLocaleLowerCase()) === -1) {
                    return false;
                }
                if(cambioSearch && item.veiculo.cambio.toString().indexOf(cambioSearch) === -1) {
                    return false;
                }
                //if(opcionalSearch && item.veiculo.opcionais.some(getOpcional(opcionalSearch['nome']))){
                //if(opcionalSearch && item.veiculo.opcionais.findIndex(opcObj => opcionalSearch.findIndex(m => m.id == opcObj.id) > -1)){
                //if(opcionalSearch && item.veiculo.opcionais.find(obj => opcionalSearch.findIndex(m => m.id == obj.id) > -1)) {
                if(opcionalSearch && opcionalSearch.indexOf(x => item.veiculo.opcionais.id.indexOf(x.id)) > -1) {
                    return false;
                }
                return true;
            })
        }
        else {
            return items;
        } 
    }
}

The listing is similar to the object below:

{
    "id": 33,
    "instante": "04/01/2019 11:37",
    "cliente": {
        "id": 3,
        "nome": "Bruce Wayne",
    },
    "tipo": "VEICULO",
    "veiculo": {
        "id": 14,
        "tipo": "carros",
        "estado": "USADO",
        "marca": {
            "id": 25,
            "nome": "Honda",
        },
        "modelo": {
            "id": 7150,
            "nome": "HR-V EX 1.8 Flexone 16V 5p Aut.",
            "marca": {
                "id": 25,
                "nome": "Honda",
            }
        },
        "opcionais": [
            {
                "id": 1,
                "nome": "AIR-BAG"
            },
            {
                "id": 3,
                "nome": "AR-CONDICIONADO"
            },
            {
                "id": 4,
                "nome": "AR-CONDICIONADO DIGITAL"
            },
            {
                "id": 5,
                "nome": "BANCO DE COURO"
            },
            {
                "id": 6,
                "nome": "DIREÇÃO ELÉTRICA"
            },
            {
                "id": 7,
                "nome": "FAROL DE NEBLINA"
            },
        ],
        "combustivel": "FLEX",
        "cambio": 1,
        "kmRodados": 10000,
        "cor": {
            "id": 6,
            "nome": "Vermelho"
        },
        "finalPlaca": "2",
        "valor": 86000,
        "anoFabricacao": "2018",
        "anoModelo": "2018",
        "dataCadastro": "04/01/2019",
    },
    "dataInicio": null,
    "dataTermino": null,
}

How to filter options using the same logic applied in the pipe?

array angular typescript filter filter

  • I corrected your question, as it is not correct to write the code as if it were text. Whenever you post the code, when finished, select all the code and click { } so that it is formatted as code and not as text.

1 answer

1

After many tests, I managed to solve my question. I will leave the solution for future research. I reversed the logic and used the some and the findIndex.

    if(opcionalSearch && opcionalSearch.some(x => item.veiculo.opcionais.findIndex(m => m.id === x.id) === -1)) {
    return false;
}

optionalSearch - Array of selected options to filter.
optional item.vehicle - Options for saved item.

Browser other questions tagged array angular typescript filter filter

You are not signed in. Login or sign up in order to post.