Jump to content

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


Fisgra

Postagens Recomendadas

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>

 

Link to comment
Compartilhe em outros sites

  • 1 month later...

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

 

Link to comment
Compartilhe em outros sites

Crie uma conta ou entre para comentar 😀

Você precisa ser um membro para deixar um comentário.

Crie a sua conta

Participe da nossa comunidade, crie sua conta.
É bem rápido!

Criar minha conta agora

Entrar

Você já tem uma conta?
Faça o login agora.

Entrar agora
  • Quem está online   0 Membros, 0 Anônimos, 15 Visitantes (Ver lista completa)

    • There are no registered users currently online


×
×
  • Create New...