Não Funcionou! | JavaScript: métodos de array | Alura

2
respostas

Referente ao curso JavaScript: métodos de array, no capítulo Map: novo array modificado e atividade Desconto com map

por Hebert Augusto Zanatelli Alves

| 115.6k xp | 30 posts

Estagiário em Suporte / QA

Salve turma, tudo bem com vcs? Parece que o video está incompleto, pulou uma parte no inicio da aula... Eu tentei fazer aqui, mas o .map nao funcionou, não acusou nenhum erro, mas nao aplicou o desconto... vou compartilhar o código aqui

HTML

<!DOCTYPE html>
<html lang="pt-br">

<head>
  <meta metacharset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>AluraBooks</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"
    integrity="sha512-NmLkDIU1C/C88wi324HBc+S2kLhi08PN5GDeUVVVC/BVt/9Izdsc9SVeVfA1UZbY3sHUlDSyRXhCzHfr6hmPPw=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />
  <link rel="stylesheet" href="style.css" />
  <script src="app/main.js" defer></script>
  <script src="app/metodoForEach.js" defer></script>
  <script src="app/metodoMap.js" defer></script>

</head>
<header class="header">
  <h1><img src="imagens/Logo-1.png" /></h1>
</header>

<body>
  <section class="banner"></section>
  <nav class="wrap">
    <ul class="nav">
      <li><button class="btn btn-front" href="#" id="btnFiltrarLivrosFront" value="front-end">LIVROS DE
          FRONT-END</button>
      </li>
      <li><button class="btn btn-back" href="#" id="btnFiltrarLivrosBack" value="back-end">LIVROS DE BACK-END</button>
      </li>
      <li><button class="btn btn-dados" href="#" id="btnFiltrarLivrosDados" value="dados">LIVROS DE DADOS</button></li>
      <li><button class="btn btn-disponiveis" href="#" id="btnLivrosDisponiveis">LIVROS DISPONÍVEIS</button></li>
      <li><button class="btn btn-ordenacao" href="#" id="btnOrdenarPorPreco">ORDENAR POR PREÇO</button></li>
    </ul>
  </nav>
  <section class="livros wrap" id="livros">

  </section>
  <section id="valor_total_livros_disponiveis">
    <div class="livros__disponiveis">
      <p>Todos os livros disponíveis por R$ <span id="valor">299,00</span></p>
    </div>
  </section>


  <footer class="rodape">
    <p>Alura - Mergulhe em tecnologia</p>
  </footer>
</body>

</html>

agora o main.js

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

async function getBuscarLivrosDaAPI() {
    const resposta = await fetch(endpointDaAPI)
    livros = await resposta.json()
    exibirOsLivrosNaTela(livros)
    let livrosComDesconto = aplicarDesconto(livros)
}

agora o metodoForEach.js

function exibirOsLivrosNaTela(listaDeLivros) {  
    listaDeLivros.forEach(livro => {
        elementoParaInserirLivros.innerHTML += `<div class="livro">
        <img class="livro__imagens" 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>`
    });
}

e por ultimo, mas não menos importante, o metodoMap.js

function aplicarDesconto(livros){
    const desconto = 0.3
    livrosComDesconto = livros.map(livro => {
        return {...livro, preco: livro.preco - (livro.preco * desconto)}
    })
    return livrosComDesconto
}

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

2 respostas

por João Ricardo Sena Moreira

| 57.3k xp | 14 posts

Fotografo

24/11/2022

eu tive esse pequeno problema também, mas consegui perceber que por algum engano na edição pulou a parte de chamar os metodos no html. Após o fechamento do footer e antes do fechamento do boddy você precisa chamar os métodos salvos na pasta app da seguinte forma

< script src="/app/main.js"></ script> < script src="/app/metodoForEach.js"></ script> < script src="/app/metodoMap.js"></ script> < script src="/app/metodoFilter.js"></ script> < script src="/app/metodoSort.js"></ script> < script src="/app/metodoReduce.js"></ script>

acredito que fazendo isso, seu roblema sera resolvido =D

OBS: tem q se tirar o espaço q eu coloquei entre os <, só coloquei aqui para poder mostrar o codigo na resposta

por Victor Leandro da Silva

| 96.9k xp | 3 posts

27/11/2022

Olá, Hebert!

Pelo que entendi, o único problema é que na função exibirOsLivrosNaTela, está sendo passado como parâmetro (livros), mas, na verdade, devia ser chamado (livrosComDesconto).

Além disso, colocaria a variável livrosComDesconto acima da função exibirLivrosNaTela, já que ela será chamada na função. E também carregaria os scripts no html lá no final, imediatamente antes do fechamento do body, pra evitar problemas no carregamento da página.

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

async function getBuscarLivrosDaAPI() {
    const resposta = await fetch(endpointDaAPI)
    livros = await resposta.json()
    exibirOsLivrosNaTela(livros)           <--- Aqui
    let livrosComDesconto = aplicarDesconto(livros)
}