-2

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>

1 Resposta 1

-1

Podes colocar os valores de pesquisa e os valores do produto em arrays e efetuar um ciclo para fazer a pesquisa.

var resultadoFiltrado = produtos.filter((item) => {
        var search = [ pesquisaNome, pesquisaCategoria, pesquisaValor, pesquisaIdInterno ];
        var values = [ item.nomeOriginal, item.categoria, item.valor, item.idInterno ]
        var flag = true;
        for (var i in search) {
            if (search[i] != values[i] && search[i] != "") {
                flag = false;
            }
        }
        if (flag) return item;
    });
4
  • Não deu certo...
    – Hoaken
    Commented 27/08/2022 às 10:03
  • Porquê que não deu certo? Commented 27/08/2022 às 16:19
  • 1
    Cara, consegui. Se achar interessante posso postar aqui. Acabei mudando o código e estou indo pra DB agora, mas devo ter a outra versão
    – Hoaken
    Commented 29/09/2022 às 18:43
  • 1
    Muito obrigado pela ajuda!
    – Hoaken
    Commented 29/09/2022 às 18:43

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .