Ao consumir API, e joga-la numa lista HTML, o primeiro elemento não aparece

Front-end
#1

image
image1366×768 157 KB

Achei que ele não estivesse pegando primeiro elemento, mas quando dei um console.log pra ver, ele estava pegando bem direitinho:

image
image1366×768 215 KB

E também, quando eu coloco o Ivysaur (o 2) como o primeiro elemento a situação é a mesma:

image
image1366×768 157 KB

Código JS:

const getPokemons = id => `https://pokeapi.co/api/v2/pokemon/${id}`

const generatePokemonsPromises = () => {
	let pokemonsAll = []
	
	for (let i = 1; i <= 150; i++) {
		pokemonsAll.push(fetch(getPokemons(i)).then(response => response.json()))
	}
	
	console.log(pokemonsAll[0])
	return pokemonsAll
}

const generateHTML = pokemons => {
	// console.log(pokemons)
	
	return lisPokemons = pokemons.reduce((accumulator, { name, id, types }) => {
		const typesPokemon = types.map(typeInfo => typeInfo.type.name)
		
		accumulator += `
			<li class="card ${typesPokemon}">
			  <img class="card-image" alt="${name}"
				  src="https://raw.githubusercontent.com/RafaelSilva2k22/PokemonImages/main/images/${id}.png" />
			  <h2 class="card-title">${id}. ${name}</h2>
			  <p class="card-subtitle">${typesPokemon.join(' || ').toUpperCase()}</p>
			</li>
		`
			
		0// console.log(accumulator)
		return accumulator
	})
}

const insertPokemonsIntoPage = pokemons => {
	const ul = document.getElementById("listPokedex")
	ul.innerHTML = pokemons
}

let pokemonsPromises = generatePokemonsPromises()
Promise.all(pokemonsPromises).then(generateHTML).then(insertPokemonsIntoPage)

Código HTML:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="style.css" media="screen" />
    <link href="https://fonts.googleapis.com/css?family=Rubik&display=swap" rel="stylesheet" />
    <title>Pokedex</title>
</head>
<body>

    <ul id="listPokedex" class="pokedex"></ul>
    
    <script src="script.js"></script>
</body>
</html>

Código CSS:

body {
	background: #EFEFBB;
	background: linear-gradient(to right, rgb(197, 230, 236), rgb(239, 187, 230));
	color: white;
	margin: 0;
	font-family: rubik;
}

.container {
	padding: 40px;
	margin: 0 auto;
}

h1 {
	text-align: center;
	font-size: 54px;
}

.pokedex {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	grid-gap: 20px;
	padding-inline-start: 0;
}

.card {
	list-style: none;
	padding: 40px;
	color: #222;
	text-align: center;
	border-radius: 20px;
	position: relative;
}

.card::after {
	content: "";
  display: block;
  width: 50%;
  height: 45%;
  border-radius: 100%;
  background-color: #fff;
  opacity: .7;
  position: absolute;
  top: 15%;
  left: 25%;
}

.steel {
	background-color: #f4f4f4;
}

.fire {
	background-color: #FDDFDF;
}

.grass {
	background-color: #DEFDE0;
}

.electric {
	background-color: #FCF7DE;
}

.water, .ice {
	background-color: #DEF3FD;
}

.ground {
	background-color: #f4e7da;
}

.rock {
	background-color: #d5d5d4;
}

.fairy {
	background-color: #fceaff;
}

.poison {
	background-color: #98d7a5;
}

.bug {
	background-color: #f8d5a3;
}

.dragon {
	background-color: #97b3e6;
}

.psychic {
	background-color: #eaeda1;
}

.flying {
	background-color: #F5F5F5;
}

.fighting {
	background-color: #E6E0D4;
}

.normal {
	background-color: #F5F5F5;
}

.card:hover {
	animation: bounce 0.5s linear;
}

.card-title {
	text-transform: capitalize;
	margin-bottom: 0px;
	font-size: 32px;
	font-weight: normal;
	position: relative;
	z-index: 2;
}

.card-subtitle {
	margin-top: 5px;
	color: #666;
	font-weight: lighter;
	position: relative;
	z-index: 2;
}

.card-image {
	height: 180px;
	position: relative;
	z-index: 2;
}

@keyframes bounce {
	20% {
			transform: translateY(-6px);
	}
	40% {
			transform: translateY(0px);
	}

	80% {
			transform: translateY(-2px);
	}
	100% {
			transform: translateY(0);
	}
}
#2

Inclua o valor inicial no reduce para ver se funciona:

const generateHTML = pokemons => {
  return pokemons.reduce((accumulator, { name, id, types }) => {
		const typesPokemon = types.map(typeInfo => typeInfo.type.name)
    
		accumulator += `
			<li class="card ${typesPokemon}">
			  <img class="card-image" alt="${name}"
				  src="https://raw.githubusercontent.com/RafaelSilva2k22/PokemonImages/main/images/${id}.png" />
			  <h2 class="card-title">${id}. ${name}</h2>
			  <p class="card-subtitle">${typesPokemon.join(' || ').toUpperCase()}</p>
			</li>
		`;

    return accumulator
	}, '') <-- aqui
}

FONTE: Array.prototype.reduce() - JavaScript | MDN

1 curtida
#3

Era literalmente isso que o Lucas falou que estava faltando… to testando e ta rodando aqui, só adicionei isso ," " virgula e aspas

Nota: Se o valorInicial não tiver sido passado como argumento, então reduce() executará o callback da função começando a partir do índice 1 (index 1), pulando o primeiro índice (index 0). Se o valorInicial for passado como argumento, a função irá começar no index 0.

1 curtida