Função filter não filtra

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:

• Trocar o this por event.target

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.

• Certificar-se de que o botão tem um valor

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.

Boa noite Mike,

Segue o link: https://github.com/Duferes/confeitaria

Obrigado pela atenção.

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.