1
resposta

JavaScript: métodos de array / não tem function de livros filtrados

O DevTools me retorna sempre avisando que não tem função para a const "livrosFiltrados", por conta disso não consigo finalizar o menu de livros disponíveis, e nem consigo visualizar, como na aula 3, sobre os livros que somente de front-end, back-end e de dados.

Teria como me ajudar, por favor?

let livros = []
const endpointDaAPI = 'https://guilhermeonrails.github.io/casadocodigo/livros.json'
getBuscarLivrosDaAPI()

async function getBuscarLivrosDaAPI() {
    const res = await fetch(endpointDaAPI)
    livros = await res.json()
    livros = aplicarDesconto(livros)
    exibirOsLivrosNaTela(livrosComDesconto)
}
function aplicarDesconto(livros) {
    const desconto = 0.3
    livrosComDesconto = livros.map(livro => {
        return {...livro, preco: livro.preco - (livro.preco * desconto)}
    })
    return livrosComDesconto
}
const botoes = document.querySelectorAll('.btn')
botoes.forEach(btn => btn.addEventListener('click', filtrarLivros))

function filtrarLivros() {
    const elementoBtn = document.getElementById(this.id)
    //houve um evento de click, chame essa função
    const categoria = elementoBtn.value
    let livrosFiltrados = categoria == 'disponivel' ? livros.filter(livro => quantidade > 0) : livros.filter(livro => livro.categoria == categoria)
    exibirOsLivrosNaTela(livrosFiltrados)
} 
const elementoParaInserirLivros = document.getElementById('livros')

function exibirOsLivrosNaTela(listaDeLivros) {
    elementoParaInserirLivros.innerHTML = ''
    listaDeLivros.forEach(livro => {
        // let disponibilidade = verificarDisponibilidadeDoLivro(livro)
        let disponibilidade = livro.quantidade > 0 ? 'livro__imagens' : 'livro__imagens indisponivel' 
        elementoParaInserirLivros.innerHTML += `
        <div class="livro">
        <img class="${disponibilidade}" src="${livro.imagem}"
          alt="${livro.alt}" />
        <h2 class="livro__titulo">
          ${livro.titulo}
        </h2>
        <p class="livro__descricao">${livro.autor}</p>
        <p class="livro__preco" id="preco">R$${livro.preco.toFixed(2)}</p>
        <div class="tags">
          <span class="tag">${livro.categoria}</span>
        </div>
      </div>
        `
    })
}

// function verificarDisponibilidadeDoLivro(livro) {
//   if (livro.quantidade > 0 ){
//     return 'livro__imagens'
//   } else {
//     return 'livros__imagens indisponivel'
//   }
// }
let = btnOrdenarPorPreco = document.getElementById ('btnOrdenarPorPreco')
btnOrdenarPorPreco.addEventListener('click', ordenarLivrosPorPrecos)

function ordenarLivrosPorPrecos() {
    let livrosOrdenados = livros.sort((a,b) => a.preco - b.preco)
    exibirOsLivrosNaTela(livrosOrdenados)
}

Eu coloquei tudo em um arquivo só para ficar mais fácil de compartilhar por aqui, mas além disso, eu tentei fazer mas não obtive sucesso.

1 resposta

Oii, Kaluanã! Tudo bem?

Peço desculpas pela demora em te responder.

Obrigada por compartilhar um trecho do seu código, nele pude perceber que na função filtrarLivros você está usando a variável quantidade no lugar de livro.quantidade.

Sugiro que altere a linha onde você filtra os livros, realizando a substituição.

O linha de código ficará assim:

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

Feito isso, atualize a página e observe se o código se comportará como esperado.

Espero ter ajudado.

Bons estudos, Kaluanã!