1
resposta

[Bug] Problema no filter.js

Meu programa está exatamente como o do instrutor, mas estou recebendo esse erro: "filter.js:7 Uncaught TypeError: Cannot read properties of undefined (reading 'filter') at HTMLButtonElement.filtrarLivros (filter.js:7:34)"

Segue o código: const botoes = document.querySelectorAll('.btn') botoes.forEach(btn => btn.addEventListener('click', filtrarLivros));

function filtrarLivros() { const elementoBtn = document.getElementById(this.id) var categoria = elementoBtn.value let livrosFiltrados = livros.filter(livro => livro.categoria == categoria); exibirOsLivrosNaTela(livrosFiltrados); }

1 resposta

Oi! Pelo que analisei seu código, o livros.filter seria para filtrar uma array de livros, correto? Neste caso, o livros.filter está indicando que a array livros é undefined. Tente usar o console.log(livros) antes da função de filtrar livros, para verificar se a sua array possui dados.

Tente utilizar o seguinte código para resolver o seu problema:

const livrosFiltrados = livros.filter((item) => livro.categoria == categoria)

Para evitar o erro em arrays undefined ou vazia, você pode usar o optional chaining ( ? ) na sua array. Exemplo:

const livros = ["Livro 1", "Livro 2", "Livro 3"]
const livrosVazio = []

const livrosFiltrados = livros.filter((item) => item === "Livro 1")
const livrosFiltradosVazio = livrosVazio?.filter((item) => item === "Livro 1")

console.log(livrosFiltrados)
console.log(livrosVazio)

Tenho 2 arrays, uma delas, preenchida com 3 livros, e outra vazia. Ao utilizar o operador ?, o mesmo permite acessar propriedades de objetos de forma segura, evitando erros se uma propriedade intermediária for null ou undefined.