Javascript 使用用户输入的vanilla js对（poke）API中的API数据进行排序_Javascript_Html_Api_Sorting_Input

Javascript 使用用户输入的vanilla js对（poke）API中的API数据进行排序

javascript html api sorting input

Javascript 使用用户输入的vanilla js对（poke）API中的API数据进行排序,javascript,html,api,sorting,input,Javascript,Html,Api,Sorting,Input,嘿，每个人都找不到这个，想知道是否有人能给我指出正确的方向？这是为了我正在做的作业，我必须使用API并显示数据。我还需要分类我使用poke api是因为它是免费的。我能够显示数据没有问题，并希望通过下拉或搜索栏添加排序。不知道哪一个最好。例如，通过“类型”，如草、水、火或其他很抱歉，我对js还很陌生我试过： const grass = pokemon.filter(pokemon => pokemon.type === 'grass') if(pokemon.type === '

嘿，每个人都找不到这个，想知道是否有人能给我指出正确的方向？这是为了我正在做的作业，我必须使用API并显示数据。我还需要分类

我使用poke api是因为它是免费的。我能够显示数据没有问题，并希望通过下拉或搜索栏添加排序。不知道哪一个最好。例如，通过“类型”，如草、水、火或其他

很抱歉，我对js还很陌生

我试过：

const grass = pokemon.filter(pokemon => pokemon.type === 'grass') 
if(pokemon.type === 'grass'){
return true;
}

但是当我这样做的时候，我不断从api中得到400个错误。以下是我的完整脚本：

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)

const pokedex=document.getElementById（'pokedex'）；
常量fetchPokemon=（）=>{
常量承诺=[]；
for（设i=1；i res.json（））；
}
承诺。所有（承诺）。然后（（结果）=>{
const pokemon=results.map（（result）=>({
name:result.name，
图像：result.sprites['front\u default']，
类型：result.types.map（（type）=>type.type.name）.join（“，”），
id:result.id
}));
显示口袋妖怪；
});
};
const displayPokemon=（pokemon）=>{
console.log（口袋妖怪）；
const pokemonHTMLString=口袋妖怪
.地图(
（博克曼）=>`

${pokeman.id}.${pokeman.name}
类型：${pokeman.Type}

`
)
.加入（“”）；
pokedex.innerHTML=pokemonHTMLString；
};
fetchPokemon（）；
//分类//
//const grass=pokemon.filter（pokemon=>pokemon.type==='grass'）
//如果（pokemon.type==='grass'）{
//返回true；
//  }
//控制台.桌子（草地）

不确定你是否需要它，但这是我的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>


快的Pokedex
错误：您的web浏览器不支持此音频播放器。
快的Pokedex

使用

sort（）

函数。对于按类型排序，请使用

.sort（（a，b）=>a.type>b.type？1:-1）

例如：

const fetchPokemon=（）=>{
常量承诺=[]；
for（设i=1；i res.json（））；
}
承诺。所有（承诺）。然后（（结果）=>{
const pokemon=results.map（（result）=>({
name:result.name，
图像：result.sprites['front\u default']，
类型：result.types.map（（type）=>type.type.name）.join（“，”），
id:result.id
})).排序（（a，b）=>a.type>b.type？1:-1）；
显示口袋妖怪；
});
};
const displayPokemon=（pokemon）=>{
const pokemonHTMLString=口袋妖怪
.地图(
（博克曼）=>`

${pokeman.id}.${pokeman.name}
类型：${pokeman.Type}

`
)
.加入（“”）；
pokedex.innerHTML=pokemonHTMLString；
};
fetchPokemon（）

快的Pokedex

您不会收到400错误，因为您在客户端执行了一个操作。因此，如果我想对来自用户输入的数据进行排序，我该怎么做？我已经能够让api拉取和显示数据，但一旦我尝试对其进行排序，就会出现错误。例如，在上面的示例中，按“type”进行排序。只需将.sort（（a，b）=>a.type>b.type？1:-1）
添加到map（）
。我已经更新了剪下的照片