2
respostas

[Sugestão] Selecionando a categoria do livro de forma dinâmica com Data Attributes e ForEach

Olá pessoal, eu penso sempre que as formações da alura nos oferecem um leque enorme de ferramentas para usarmos como Dev's Front-End, logo, unindo os conhecimentos deste curso e o curso de Javascript Manipulando o DOM desenvolvi a seguinte solução abaixo:

HTML

Adicionei um data-attribute para todos os botões (filtros), de forma a me permitir a seleção desses botões de uma única vez no Javascript com o método querySelectorAll

<li>
    <button
        class="btn btn-front"
        href="#"
        id="btnFiltrarLivrosFront"
        value="front-end"
        data-btn-filter="front-end"
    >
        LIVROS DE FRONT-END
    </button>
</li>
<li>
    <button
        class="btn btn-back"
        href="#"
        id="btnFiltrarLivrosBack"
        value="back-end"
        data-btn-filter="back-end"
    >
        LIVROS DE BACK-END
    </button>
</li>

Javascript

1. Selecionando os botões

const buttonsFilter = document.querySelectorAll('[data-btn-filter]');

Neste código acima, usei document.querySelectorAll para selecionar todos os elementos que possuem o atributo data-btn-filter. Esses elementos são os botões que serão usados para filtrar os livros.

2. Adicionando o evento de clique aos botões:

buttonsFilter.forEach((buttonFilter) => {
  buttonFilter.addEventListener('click', (event) => {
    const categoria = event.target.dataset.btnFilter;
    filtrarLivros(categoria);
  });
});

Aqui, utilizei forEach para iterar sobre cada botão selecionado anteriormente. Para cada botão, adicionei um evento de clique usando addEventListener. Quando um botão é clicado, a função de retorno de chamada é executada. Dentro dessa função, estamos capturando o valor do atributo data-btn-filter do botão clicado usando event.target.dataset.btnFilter. Esse valor é armazenado na variável categoria e, em seguida, passado como argumento para a função filtrarLivros.

3. Filtrando os livros:

function filtrarLivros(categoria) {
  let livrosFiltrados = livros.filter((livro) => livro.categoria === categoria);
  console.table(livrosFiltrados);
}

A função filtrarLivros recebe a categoria como argumento. Dentro da função, usamos o método filter do array livros para filtrar os livros com base na categoria selecionada. A função de callback passada para o filter verifica se a propriedade categoria de cada livro é igual à categoria fornecida. Os livros filtrados são armazenados na variável livrosFiltrados. Por fim, utilizei console.table para exibir os livros filtrados no console em formato de tabela.

2 respostas

Oi João, tudo bem?

Parabéns pela sua solução utilizando Data Attributes e ForEach para selecionar a categoria do livro de forma dinâmica. Essa é uma ótima maneira de filtrar os livros de acordo com a categoria selecionada.

O seu código está muito bem organizado e fácil de entender. E você explicou muito bem cada etapa do processo, o que é muito importante para ajudar outras pessoas a entenderem o seu código.

Continue assim, sempre buscando novas soluções e aprendendo cada vez mais.

Um abraço e bons estudos.

Olá, estou bem. Muito obrigado Lorena significa muito o seu feedback (: