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>