-2

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>
5
  • Por favor, edite a pergunta para limitá-la a um problema específico com detalhes suficientes para identificar uma resposta adequada.
    – Comunidade Bot
    Commented 15/08/2022 às 18:42
  • Não cumprimente, não agradeça e não escreva resolvido nos títulos. Também não use o campo de perguntas para apresentar soluções. As soluções devem publicadas nos de respostas. Commented 16/08/2022 às 23:17
  • Ok... Não sabia disso. Vlw
    – Hoaken
    Commented 16/08/2022 às 23:18
  • Sua pergunta parece ter alguns problemas e sua experiência aqui no Stack Overflow em Português poderá não ser a melhor por causa disso. Queremos que você se dê bem aqui e consiga o que quer, mas para isso precisamos que você faça a sua parte. Veja algumas orientações que vão te ajudar: Guia de sobrevivência do Stack Overflow em Português. Ao postar um código completo ou código muito extenso dificulta a localização do problema, a recomendação é que seja feito um Exemplo Mínimo, Completo e Verificável que é uma simplificação compilável do código onde replique a porção que gera o erro Commented 16/08/2022 às 23:21
  • Ok, obrigado pelas indicações
    – Hoaken
    Commented 29/09/2022 às 18:44

1 Resposta 1

-2

Dá para você usar o método filter e filtrar pela propriedade que você deseja.

Ex:

const produtos = [
 { nome: 'macarrão', preco: 12.3, categoria: 'massas'},
 { nome: 'feijão', preco: 10.0, categoria: 'cereais'},
 { nome: 'arroz', preco: 20.0, categoria: 'cereais'},
]


produtos.filter((p) => p.preco > 10.0) //retorna um array com os objetos de macarrão e feijão

produtos.filter((p) => p.name === "arroz") // troca o arroz pelo input digitado assim vai filtrando conforme for digitando

Para evitar que apareça [object Obeject] basta acessar a propriedade (key) do objeto que você quer

Ex

produtos[0].nome // macarrão

3
  • Muuito obrigado pela disposição! Eu tentei ajeitar aqui, mas não adiantou muito... Quanto ao filtro, ele funciona somente com aquilo que adiciono manualmente no array EXTRATO/PRODUTOS, o que é adicionado por PUSH não funciona..
    – Hoaken
    Commented 15/08/2022 às 19:58
  • Fiz um comentário postando o meu código, porque não coube aqui...
    – Hoaken
    Commented 15/08/2022 às 20:06
  • Tem como acessar todas as propriedades (keys) da array? Porque não sei quantas terão... Cada vez que alguém registrar, ela vai aumentar..
    – Hoaken
    Commented 15/08/2022 às 20:08

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 .