Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Problema no Btn Disponibilidade

Segue linha de código proposta pelo professor para fazer com que o btn funcione:

let livrosFiltrados = categoria == 'disponivel' ? livros.filter(livro => livro.quantidade > 0) : livros.filter(livro => livro.categoria == filtro)

Todavia o btn não estava realizando o filtro conforme o esperado, dos livros com quantidade maior que 0.

No forum, encontrei pessoas dizendo que eu precisava inserir o value na linha de código do btn dentro do arquivo index.html, pois o mesmo veio sem.

  <li><button class="btn btn-disponiveis" href="#" id="btnLivrosDisponiveis" value="disponivel">LIVROS DISPONÍVEIS</button></li>

Executei esta ação e mesmo assim o btn não estava realizando o filtro conforme o esperado. Entao verifiquei que na API, no campo categoria nao tinha a opcao [disponivel], apenas [front-end, back-end, dados].

Entao precisei criar uma solucao semelhante a do professor porem focada no botao de Disponibilidade. Dentro do documento metodoFilter.js inseri o seguinte codigo:

const botaoLivrosDisponiveis = document.getElementById('btnLivrosDisponiveis')
botaoLivrosDisponiveis.addEventListener('click', selecionarLivrosDisponiveis)

function selecionarLivrosDisponiveis () {
    let livrosDisponiveis = livros.filter(livro => livro.quantidade > 0)
    exibirOsLivrosNaTela(livrosDisponiveis)
}

Mesmo chegando ao mesmo resultado, fazer com que o btn funcione, continuo com a duvida se realmente a forma como o professor passou na aula deveria funcionar.

2 respostas
solução!

Opa, Gabriel, tudo certo?

Que bom que conseguiu contornar o problema e encontrar sua própria solução, acredito que isso faça parte da "vida de dev". Mas voltando ao problema, na parte do código que você citou:

let livrosFiltrados = categoria == 'disponivel' ? livros.filter(livro => livro.quantidade > 0) : livros.filter(livro => livro.categoria == filtro)

Em nenhum momento o código esta verificando na API se existe a categoria 'disponivel'. Oque esta acontecendo é: -Criamos anteriormente a constante categoria que recebe o valor do botão. -Agora, criamos a variável livrosFiltrados, que vai receber o resultado da comparação. -Estamos verificando se o valor do botão é 'disponivel' ( categoria == 'disponivel' ). Algo como 'Se a categoria do botão for disponível, faça isso' ( E por isso você precisa value="disponivel" no seu botão no HTML ). -Se for, ele vai verificar na API se a quantidade é maior que 0 (ai sim buscando algo na API).

Caso queira dar uma olhada no meu código pessoal no GitHub fique a vontade. https://github.com/Gotera/LearningJS/tree/master/jsArray

Não sou um dos melhore explicando. Caso a dúvida persista ou queira perguntar algo mais, pode mandar!

Oi, tudo bem? Também me deparei com esse problema, a solução que encontrei foi um pouco parecida, basicamente a mesma lógica, porém sem chamar outro botão.

function filtrarLivros() {
    if (this.classList.value == 'btn btn-disponiveis'){
        let disponiveis = livros.filter(livro => livro.quantidade > 0)
        exibirOsLivrosNaTela(disponiveis)
    } else {
    const elementoBtn = document.getElementById(this.id)
    const categoria = elementoBtn.value
    let livrosFiltrados = livros.filter(livro => livro.categoria == categoria)
    exibirOsLivrosNaTela(livrosFiltrados)
}}

O que eu procuro é saber se o botão clicado é o de disponíveis e então decidir qual função executar, ao invés de criar uma função exclusiva para esse botão.