Эй, все не могли найти это и задавались вопросом, может ли кто-нибудь указать мне правильное направление? Это для задания, которое я делаю, я должен использовать API и отображать данные. У меня тоже должна быть сортировка.
Я использую poke api, потому что он бесплатный. Я могу отображать данные без проблем и хочу добавить сортировку по капле или строке поиска. Не уверен, что лучше. например, «тип», как трава или вода или огонь или что-то еще.
Я прошу прощения, я все еще довольно новичок в js.
Я пытался:
const grass = pokemon.filter(pokemon => pokemon.type === 'grass')
if(pokemon.type === 'grass'){
return true;
}
, но я продолжаю получать 400 ошибок от API, когда я делаю который. Вот мой полный сценарий:
const pokedex = document.getElementById('pokedex');
const fetchPokemon = () => {
const promises = [];
for (let i = 1; i <= 150; i++) {
const url = `https://pokeapi.co/api/v2/pokemon/${i}`;
promises.push(fetch(url).then((res) => res.json()));
}
Promise.all(promises).then((results) => {
const pokemon = results.map((result) => ({
name: result.name,
image: result.sprites['front_default'],
type: result.types.map((type) => type.type.name).join(', '),
id: result.id
}));
displayPokemon(pokemon);
});
};
const displayPokemon = (pokemon) => {
console.log(pokemon);
const pokemonHTMLString = pokemon
.map(
(pokeman) => `
<li class="card">
<img class="card-image" src="${pokeman.image}"/>
<h2 class="card-title">${pokeman.id}. ${pokeman.name}</h2>
<p class="card-subtitle">Type: ${pokeman.type}</p>
</li>
`
)
.join('');
pokedex.innerHTML = pokemonHTMLString;
};
fetchPokemon();
//Sorting//
// const grass = pokemon.filter(pokemon => pokemon.type === 'grass')
// if(pokemon.type === 'grass'){
// return true;
// }
// console.table(grass)
Не уверен, если вам это нужно, но вот мой HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Quick's Pokedex</title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="/css/animate.css" />
<link href="https://fonts.googleapis.com/css?family=Rubik&display=swap" rel="stylesheet"/>
</head>
<body>
<div class="header">
<img src="/assets/img/two.png" alt="Pokemon Logo" height="500" class="animated fadeInLeftBig logo" id="logo">
</div>
<div class="container">
<audio class="audio-player" loop src="/assets/audio/pokemon.mp3" controls>
Error: your web browser does not support this audio player.
</audio>
<h1 class="quicks-h1">Quick's Pokedex</h1>
<ul id="pokedex"></ul>
</div>
<script src="app.js"></script>
</body>
</html>