Quero fazer um sistema em que a pessoa cadastre um bloco (array produto) com dois valores (nomeProduto e valorProduto). Posteriormente, quero aplicar um filtro pelo nome do produto ou pelo preço. Quero que todo o bloco (produto: nome + preço) seja exibido.
Nesse teste abaixo, estou trabalhando com dois campos (nomeProduto e valorProduto), mas depois quero fazer 3 campos: nome do produto, preço e categoria.
Então agora seguem meus dois problemas.
1. Quando eu pesquisar pela categoria ou preço ou produto, quero que sejam exibidos todos os dados daquele produto, mas não consigo fazer isso.
2. Eu exibo na tela os valores adicionados (nome e preço), mas como estou usando ARRAY dentro de ARRAY, não consigo tirar uma vírgula no começo de toda linha exibida no html do usuário. Tentei usar OBJETO dentro da array, pra evitara a vírgula, mas desse jeito não aparecia o conteúdo do objeto, aparecia somente [object Obeject]... Se tiver um jeito de exibir e pesquisar o conteúdo de objeto dentro da array, acho que seria até melhor, não sei..
Segue a imagem do resultado:
[Foto do resultado: web + console][1]
Segue abaixo meu código completo (só estou utilizando um arquivo):
<!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>
<script src="script.js"> </script>
</head>
<style>
body {
background: rgb(113, 183, 240);
color: white;
font: normal 14pt Times;
}
</style>
<body>
<br><br><br>
<input id="entradaNomeProduto" placeholder="Nome do Produto">
<input id="entradaValorProduto" placeholder="Valor do Produto">
<button onclick="fRegistro(entradaNomeProduto.value, entradaValorProduto.value)">Registrar Produto</button>
<button onclick="fBusca(entradaNomeProduto.value)">Buscar Produto</button>
<div id="resultadoExtrato"></div>
<script>
var extrato = [];
var nomeProduto; // aqui é o nome do gasto
var valorProduto; //aqui é o valor do gasto
//FUNÇÃO DO BOTÃO REGISTRAR PRODUTO
function fRegistro(entradaNomeProduto, entradaValorProduto) {
var produto = [
nomeProduto = entradaNomeProduto,
valorProduto = entradaValorProduto + "<br><hr>",
]
extrato.push(produto);
console.log(extrato);
document.getElementById("resultadoExtrato").innerHTML = extrato;
}
//FUNÇÃO DO BOTÃO BUSCAR PRODUTO
function fBusca(entradaNomeProduto) {
// o problema aqui abaixo é que tem array dentro de array.
//O filter não pega o conteúdo da "sub"array (produto).
//Se eu deixar o objeto com uma variável somente (nomeProduto ou valorProduto),
//o filtro consegue filtrar
//Preciso achar um jeito de fazer o filtro identificar o que quero dentro da "sub"array produto,
//E puxar toda a "sub"array pra mim.
//Consegui fazer o filtro puxar um parâmetro dentro do produto, mas preciso que seja puxado tudo
// o objeto, e não somente aquele que confere com o frilto
// Por exemplo:
// adiciono o objetoA com os seguintes dados: valor = 1, e valor2 = 2;
// adiciono o objetoB com os seguintes dados: valor = 100, e valor2 = 200;
// Quando aplicar o filtro "1", preciso que o programa devolva não somente o valor = 1,
// Preciso que devolva todo o objetoA que possui valor = 1 e valor = 2
var filtrado = extrato.filter((item) => item == entradaValor);
console.log(filtrado);
array.map(obj1 => (obj1.movimentacoes.InternaMov.filter(obj2 => obj2.tipo === 'saida')));
}
/* tentei usar isso aqui, mas não consegui também:
valores.forEach((item) => {
document.getElementById("resultadoExtrato").innerHTML = "<br><hr>" + item;
})*/
</script>
</body>
</html>
PS: No momento, o filtro busca somente o conteúdo que tem no campo nomeProduto.
Se puderem daí me explicar os comando pra resolver, agradeço, pois comecei recentemente e não conheço muito, rs..
Galera, desde já, muito obrigado pela ajuda.
[1]: https://i.sstatic.net/9p7sm.png
___________________
**RESOLUÇÃO:**
Deu certo agora.
Fiz alguma alterações.
<!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, entradaDataProduto.value)">Registrar</button>
<button onclick="fPesquisar(entradaNomeProduto.value, entradaCategoriaProduto.value, entradaValorProduto.value, entradaDataProduto.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 data;
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).
function fRegistro(entradaNomeProduto, entradaValorProduto, entradaCategoriaProduto, entradaDataProduto) {
var valor = entradaValorProduto;
var valorFormatado = Intl.NumberFormat('pt-br', {style: 'currency', currency: 'BRL'}).format(valor)
var data = entradaDataProduto;
// var dataFormatada = Intl.NumberFormat('pt-br', {style: 'currency', currency: 'BRL'}).format(valor) QUERO COLOCAR PRA FORMATAR A DATA DEPOIS
var produto = {
idInterno: ++idUnico,
nomeOriginal: entradaNomeProduto,
nome: "<br><hr>" +entradaNomeProduto,
categoria: entradaCategoriaProduto,
valor,
valorFormatado,
data,
dataFormatada: data,
}
produtos.push(produto);
var exibeExtrato = produtos.map(function(item) {
return `${item.nome + separador} ${item.categoria + separador} ${item.valorFormatado + separador} ${item.data + 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, pesquisaData, pesquisaIdInterno){
var resultadoFiltrado = produtos.filter(item =>
item.nomeOriginal == pesquisaNome && item.categoria == pesquisaCategoria && item.valor == pesquisaValor && pesquisaData == "" || // NOME + CATEGORIA + VALOR
item.nomeOriginal == pesquisaNome && item.categoria == pesquisaCategoria && pesquisaValor == "" && pesquisaData == "" || // NOME + CATEGORIA OOOK
item.nomeOriginal == pesquisaNome && pesquisaCategoria == "" && item.valor == pesquisaValor && pesquisaData == "" || // NOME + VALOR OOOK
pesquisaNome == "" && item.categoria == pesquisaCategoria && item.valor == pesquisaValor && pesquisaData == "" || // CATEGORIA + VALOR
item.nomeOriginal == pesquisaNome && pesquisaCategoria == "" && pesquisaValor =="" && pesquisaData == "" || //NOME
pesquisaNome == "" && item.categoria == pesquisaCategoria && pesquisaValor == "" && pesquisaData == "" || // CATEGORIA
pesquisaNome == "" && pesquisaCategoria == "" && item.valor == pesquisaValor && pesquisaData == "" || // VALOR
pesquisaNome == "" && pesquisaCategoria == "" && pesquisaValor == "" && item.data == pesquisaData || // DATA
pesquisaNome == "" && pesquisaCategoria == "" && pesquisaValor == "" && item.idInterno == pesquisaIdInterno || // IdInterno
pesquisaNome == "" && pesquisaCategoria == "" && pesquisaValor == "" && item.pesquisaIdInterno == "" // VAZIO
)
console.log(resultadoFiltrado);
var exibeBuscaEspecificaFiltro = resultadoFiltrado.map(function(item){
return item.nome + separador + item.categoria + separador + item.valorFormatado + separador + item.dataFormatada + 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>