Solucionado
Dei uma mudada na forma que foi feito nas aulas e tentei aplicar em um projeto diferente para aprendizado, mas na hora de clicar no botão de filtrar, ao invés de filtrar por categoria ele adiciona todos os produtos novamente.
Código HTML
Código JavaScript:
LISTA DOS PRODUTOS:
Alguém consegue me dar uma luz ??
Olá, Eduardo, como vai?
No código que você enviou, ao adicionar o addEventListener, a função filtrarBolos não está conseguindo acessar o elemento do botão corretamente com this.id. Isso acontece porque dentro de funções normais, o this pode se comportar de maneira inesperada.
Você pode tentar fazer o seguinte:
function filtrarBolos(event) {
const elementoBtn = event.target;
const categoria = elementoBtn.value;
let bolosFiltrados = cakeJson.filter(cake => cake.category === categoria);
exibirBolos(bolosFiltrados);
}
No addEventListener, o event contém informações sobre o elemento que disparou o evento, e event.target é o próprio botão que foi clicado. Assim, você consegue acessar o valor corretamente.
Confere se os botões possuem o valor adequado no HTML.
<button class="btn" value="caseiro">Categoria 1</button>
<button class="btn" value="chocolate">Categoria 2</button>
Espero ter ajudado!
Siga firme nos seus estudos e conte com o fórum sempre que precisar!
Abraços :)
Não funcionou, continua colocando todos os produtos ao invés de filtrar a categoria dos produtos. =/
Oi, Eduardo.
Você teria o código em um repositório onde eu possa ver ele melhor e testar aqui na minha máquina? Se não tiver, pode enviar ele aqui no fórum mesmo, só lembrando de formatar as linhas de código antes de postar.
Você pode fazer isso selecionando o código e clicando no botão marcado na imagem abaixo.
Olá, Eduardo.
O problema era que o array de itens filtrados estava sendo passado como parâmetro para a função exibirBolos, mas a função não estava preparada para receber nenhum parâmetro.
O código abaixo deve funcionar na forma que você quer:
// Passando listaDeBolos como parametro
function exibirBolos(listaDeBolos) {
// Limpa o grid antes de adicionar os novos
document.querySelector('.products-grid').innerHTML = ''
// Confere se foi passado uma lista como parametro, e se sim,
// mapeia e renderiza os itens da lista
if (listaDeBolos) {
listaDeBolos.map((item, index) => {
let cakeItem = document.querySelector('.models .cake-item').cloneNode(true);
cakeItem.querySelector('.product-img img').src = item.image;
cakeItem.querySelector('.cake-name').innerHTML = item.title;
cakeItem.querySelector('.cake-desc').innerHTML = item.description;
cakeItem.querySelector('.cake-price').innerHTML = item.price;
document.querySelector('.products-grid').append(cakeItem);
});
// Encerra a função para que ela não continue sendo executada
return
}
cakeJson.map((item, index) => {
let cakeItem = document.querySelector('.models .cake-item').cloneNode(true);
cakeItem.querySelector('.product-img img').src = item.image;
cakeItem.querySelector('.cake-name').innerHTML = item.title;
cakeItem.querySelector('.cake-desc').innerHTML = item.description;
cakeItem.querySelector('.cake-price').innerHTML = item.price;
document.querySelector('.products-grid').append(cakeItem);
});
}
Vou deixar também um gif demonstrando o resultado.
Se ainda precisar de ajuda é só avisar!
Abraços :)
Top demais Mike, ajudou demais !! Muito obrigado pela ajuda.