Como filtrar um bloco de array dentro de array em javascript + como imprimir conteúdo de objeto dentro de array #2335

Derphol · 2022-08-15T18:51:16Z

Derphol
Aug 15, 2022

boa tarde, tudo bem?

Primeiro post aqui.
Sou novato em javascript.

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 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.

victorinknov · 2022-08-15T22:15:32Z

victorinknov
Aug 15, 2022

Oi @Fisgra, tudo bem?

Primeiro, você não vai conseguir descrever um produto em um array, precisará de um objeto. Então vamos a estrutura e sintaxe de um objeto:

Estrutura: produto = atributo1, atributo2, atributo3...
Sintaxe em JS:
let produto = { nomeProduto: 'Headset', valorProduto: 249 }

Feito isso, precisaremos de um array com todos nossos produtos e um vazio para incluir os resultados da busca.
let todosProdutos = [{nomeProduto: 'Headset', valorProduto: 249}, {nomeProduto: 'Mousepad', valorProduto: 37}]

let resultadosBusca = [ ]

Agora, vamos precisar incrementar nosso array de resultados cada vez que o código der "match" com um produto.
Para filtrar elementos de um array você pode usar a função filter, includes e algumas outras. Aqui vou usar a função includes.

for(let i = 0; i < todosProdutos.length; i++){ if(todosProdutos[i].nomeProduto.includes('Headset')) { resultadosBusca.push(todosProdutos[i]) } }

Agora é só mostrar pro usuário o resultado da busca dele. Se der um console.log(resultadosBusca) já vai conseguir ver os resultados. Tenha em mente que o Javascript é case sensitive, então vai ter que aplicar uma função para converter tudo para minúsculo.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Como filtrar um bloco de array dentro de array em javascript + como imprimir conteúdo de objeto dentro de array #2335

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Select a reply

Uh oh!

Como filtrar um bloco de array dentro de array em javascript + como imprimir conteúdo de objeto dentro de array #2335

Uh oh!

Uh oh!

Derphol Aug 15, 2022

Replies: 1 comment

Uh oh!

Uh oh!

victorinknov Aug 15, 2022

Derphol
Aug 15, 2022

victorinknov
Aug 15, 2022