Como fazer um filtro com múltiplos campos combinados no javascript?

Fisgra · Agosto 18, 2022

quero fazer um filtro.

CAMPOS: NOME, CATEGORIA, VALOR, DATA, ID

Se a pessoa completar somente NOME, quero que retorne todos os objetos que tenham este NOME.
Mas se a pessoas preencher NOME e VALOR, quero que retorne apenas os objetos que tenham este NOME e este VALOR, ao mesmo tempo.

Pra isso, criei uma regra pra cada possibilidade, diversos "IF", porém, isso é mt chato e demorado.
Tem uma ideia melhor?

Segue o trecho do código de filtro:

 function fPesquisar (pesquisaNome, pesquisaCategoria, pesquisaValor, pesquisaIdInterno){
    
    
        var resultadoFiltrado = produtos.filter(item => 
    
            item.nomeOriginal == pesquisaNome && item.categoria == pesquisaCategoria    && item.valor       == pesquisaValor || // NOME + CATEGORIA + VALOR  
            item.nomeOriginal == pesquisaNome && item.categoria    == pesquisaCategoria && pesquisaValor    == ""            || // NOME + CATEGORIA           OOOK
            item.nomeOriginal == pesquisaNome && pesquisaCategoria == ""                && item.valor       == pesquisaValor || // NOME + VALOR               OOOK      
            pesquisaNome      == ""           && item.categoria    == pesquisaCategoria && item.valor       == pesquisaValor || // CATEGORIA + VALOR
            item.nomeOriginal == pesquisaNome && pesquisaCategoria == ""                && pesquisaValor    ==""             || //NOME
            pesquisaNome      == ""           && item.categoria    == pesquisaCategoria && pesquisaValor    == ""            || // CATEGORIA  
            pesquisaNome      == ""           && pesquisaCategoria    == ""             && item.valor       == pesquisaValor || // VALOR 
            pesquisaNome      == ""           && pesquisaCategoria    == ""             && pesquisaValor    == ""            && item.idInterno  == pesquisaIdInterno || // VALOR
            pesquisaNome      == ""           && pesquisaCategoria    == ""             && pesquisaValor    == ""            && item.pesquisaIdInterno == ""     // VAZIO 
                                                                       
    
        )
    
           console.log(resultadoFiltrado);
    
          var exibeBuscaEspecificaFiltro = resultadoFiltrado.map(function(item){
            
            return item.nome + separador + item.categoria + separador + item.valor + separador + item.idInterno;
    
    
       })
       document.getElementById("resultadoExtrato").innerHTML = exibeBuscaEspecificaFiltro;
        }

Segue o código completo:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        
        <input id="entradaNomeProduto" placeholder="Nome do Produto">
        <input id="entradaCategoriaProduto" placeholder="Categoria do Produto">
        <input id="entradaValorProduto" placeholder="Preço do Produto">
        <input id="entradaDataProduto" placeholder="Data (01/01/2022)">
        <input id="entradaIdInterno" placeholder="Id (Somente para pesquisa!)">
        <br><br>
           <button onclick="fRegistro(entradaNomeProduto.value, entradaValorProduto.value, entradaCategoriaProduto.value)">Registrar</button>
           <button onclick="fPesquisar(entradaNomeProduto.value, entradaCategoriaProduto.value, entradaValorProduto.value, entradaIdInterno.value)">Filtrar</button>
            <!--<input id="entradaBuscaNome" placeholder="Busca pelo nome">
        <input id="entradaBuscaCategoria" placeholder="Busca pela Categoria">
        <input id="entradaBuscaValor" placeholder="Busca pelo Valor"> -->
        
          <br><br>
    
        <div id="resultadoExtrato"></div>
    
    
        <script>
    
    var produtos = []
    var nome; // aqui é o nome do gasto que é acrescido de pular linha (<br>) e linha <hr>
    var nomeOriginal; // Nome do gasto original
    var valor; //aqui é o valor do gasto
    var preco; // inutilizado
    var separador = " | " // para separar os inputs na exibição
    var idUnico = 0; // único em toda o sistema. É acrescido um número a cada fRegistro (linha 47).
    var idInterno; // copia e armazena em si o idUnico no momento do registro. O idInterno não é mais alterado, e o idUnico continua sendo alterado a cada fRegistro (linha 47).
            //FUNÇÃO DO BOTÃO REGISTRAR PRODUTO
     function fRegistro(entradaNomeProduto, entradaValorProduto, entradaCategoriaProduto) {
    
                var produto = {
                    idInterno: ++idUnico,
                    nomeOriginal: entradaNomeProduto,
                    nome: "<br><hr>" +entradaNomeProduto,
                    categoria: entradaCategoriaProduto,
                    valor: entradaValorProduto,
    
                }
    
                produtos.push(produto);
                
                
                var exibeExtrato = produtos.map(function(item) {
                    return `${item.nome + separador} ${item.categoria + separador} ${item.valor + separador}  ${item.idInterno + separador}`;
                     
                })
                document.getElementById("resultadoExtrato").innerHTML = exibeExtrato;
                console.log(produtos); 
                          
                
                
    
                // var userFullnames = produtos.map(function(element){
                // return `${element.nome} ${element.preco}`;
                // })
    
                // document.getElementById("resultadoExtrato").innerHTML = userFullnames;
            
            }
    
    
    function fPesquisar (pesquisaNome, pesquisaCategoria, pesquisaValor, pesquisaIdInterno){
    
    
        var resultadoFiltrado = produtos.filter(item => 
    
            item.nomeOriginal == pesquisaNome && item.categoria == pesquisaCategoria    && item.valor       == pesquisaValor || // NOME + CATEGORIA + VALOR  
            item.nomeOriginal == pesquisaNome && item.categoria    == pesquisaCategoria && pesquisaValor    == ""            || // NOME + CATEGORIA           OOOK
            item.nomeOriginal == pesquisaNome && pesquisaCategoria == ""                && item.valor       == pesquisaValor || // NOME + VALOR               OOOK      
            pesquisaNome      == ""           && item.categoria    == pesquisaCategoria && item.valor       == pesquisaValor || // CATEGORIA + VALOR
            item.nomeOriginal == pesquisaNome && pesquisaCategoria == ""                && pesquisaValor    ==""             || //NOME
            pesquisaNome      == ""           && item.categoria    == pesquisaCategoria && pesquisaValor    == ""            || // CATEGORIA  
            pesquisaNome      == ""           && pesquisaCategoria    == ""             && item.valor       == pesquisaValor || // VALOR 
            pesquisaNome      == ""           && pesquisaCategoria    == ""             && pesquisaValor    == ""            && item.idInterno  == pesquisaIdInterno || // VALOR
            pesquisaNome      == ""           && pesquisaCategoria    == ""             && pesquisaValor    == ""            && item.pesquisaIdInterno == ""     // VAZIO 
                                                                       
    
        )
    
           console.log(resultadoFiltrado);
    
          var exibeBuscaEspecificaFiltro = resultadoFiltrado.map(function(item){
            
            return item.nome + separador + item.categoria + separador + item.valor + separador + item.idInterno;
    
    
       })
       document.getElementById("resultadoExtrato").innerHTML = exibeBuscaEspecificaFiltro;
    
    //    var exibeBuscaEspecificaFiltro = buscaEspecifica Filtrada.map(function(item) {
    //                 return `${item.nome + separador} ${item.valor + separador} ${item.categoria + separador} ${item.idInterno + separador}`;
                     
    //             })
    //             document.getElementById("resultadoExtrato").innerHTML = exibeBuscaEspecificaFiltro;
     
       
      
    
    
        // if(pesquisaNome !="" && pesquisaCategoria !="" && pesquisaValor!=""){ // todos os campos
        //     var buscaFiltrada = produtos.filter(item => item.nomeOriginal == pesquisaNome && item.categoria == pesquisaCategoria && item.valor == pesquisaValor);
    
        // console.log(buscaFiltrada);
    
        // //APLICAÇÃO DOS FILTROS
        // }else if(pesquisaNome ==="" && pesquisaCategoria =="" && pesquisaValor !="") {
        //     var buscaFiltrada = produtos.filter(item =>  item.valor == pesquisaValor);//somente VALOR
    
        //     console.log(buscaFiltrada);
          
    
        // }else     if(pesquisaNome =="" && pesquisaCategoria !="" && pesquisaValor==""){//somente CATEGORIA
        //     var buscaFiltrada = produtos.filter(item => item.categoria == pesquisaCategoria);
    
        //     console.log(buscaFiltrada.values);
    
        // }else     if(pesquisaNome !="" && pesquisaCategoria =="" && pesquisaValor==""){ //somente NOME
        //     var buscaFiltrada = produtos.filter(item => item.nomeOriginal == pesquisaNome);
    
        //     console.log(buscaFiltrada);
    
        // }else     if(pesquisaNome !="" && pesquisaCategoria !="" && pesquisaValor==""){ //NOME + CATEGORIA
        //     var buscaFiltrada = produtos.filter(item => item.nomeOriginal == pesquisaNome && item.categoria == pesquisaCategoria);
    
        //     console.log(buscaFiltrada);
    
        // }else     if(pesquisaNome !="" && pesquisaCategoria =="" && pesquisaValor!=""){ //NOME + VALOR
        //     var buscaFiltrada = produtos.filter(item => item.nomeOriginal == pesquisaNome && item.valor == pesquisaValor);
    
        //     console.log(buscaFiltrada);
    
        // }else     if(pesquisaNome =="" && pesquisaCategoria !="" && pesquisaValor!=""){ //CATEGORIA + VALOR
        //     var buscaFiltrada = produtos.filter(item => item.categoria == pesquisaCategoria && item.valor == pesquisaValor);
    
        //     console.log(buscaFiltrada);
    
        // }
       
     //document.getElementById("resultadoExtrato").innerHTML = buscaFiltrada + buscaFiltrada.nome + buscaFiltrada.categoria + buscaFiltrada.valor
    }

    </script>

</body>
</html>

fchaves · Setembro 26, 2022

Você pode usar o operador de coalescência nula (??) e fazer algo nesse modelo:

const produtos = [
    { nome: 'item1', categoria: 'categoria1', valor: 10, id: 1234 },
    { nome: 'item2', categoria: 'categoria1', valor: 15, id: 5678 },
    { nome: 'item3', categoria: 'categoria2', valor: 20, id: 9012 },
    { nome: 'item4', categoria: 'categoria2', valor: 20, id: 3456 },
    { nome: 'item5', categoria: 'categoria3', valor: 15, id: 7890 },
];

function pesquisar(valores) {
    const resultado = produtos.filter((item) => {
        const nome = valores.nome ?? item.nome;
        const categoria = valores.categoria ?? item.categoria;
        const valor = valores.valor ?? item.valor;
        const id = valores.id ?? item.id;
        if (nome === item.nome &&
            categoria === item.categoria &&
            valor === item.valor &&
            id === item.id
        ) return item;
    });
    return resultado;
}

pesquisar({ categoria: 'categoria2', valor: 20 }); // retorna item3 e item4
pesquisar({ categoria: 'categoria1' }); // retorna item1 e item2
pesquisar({ valor: 15 }); // retorna item2 e item5
pesquisar({ nome: 'item6' }); // retorna um array vazio

Entrar

Como fazer um filtro com múltiplos campos combinados no javascript?

Postagens Recomendadas

Fisgra

Link to comment

Compartilhe em outros sites

fchaves

Link to comment

Compartilhe em outros sites

Crie uma conta ou entre para comentar 😀

Crie a sua conta

Entrar

Quem está online 9 Membros, 0 Anônimos, 41 Visitantes (Ver lista completa)

Próximos Eventos

Estatísticas de Membros

Fórum

Programa de Indicação CdD

Cursos

CdD

Mais