个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
嘿，每个人都找不到这个，想知道是否有人可以指出我正确的方向？这是我正在做的作业，我必须使用 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)
不确定你是否需要它，但这是我的 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>
最佳答案
使用 sort() 函数。按类型排序使用 .sort((a, b) => a.type > b.type ? 1 : -1)
例子:
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
})).sort((a, b) => a.type > b.type ? 1 : -1);
displayPokemon(pokemon);
});
};
const displayPokemon = (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();<div class="container">
<h1 class="quicks-h1">Quick's Pokedex</h1>
<ul id="pokedex"></ul>
</div>关于javascript - 使用带有用户输入的 vanilla js 从 (poke) API 中对 API 数据进行排序，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60163400/
25
4
0
它是链接中的框架 https://vanillaforums.com/en/software/ ? 解释是什么？有哪些链接？ 最佳答案 Vanilla PHP 就是 PHP 本身。 一般来说，术语va
如何使用 vanilla javascript 将按键模拟为输入？ 我已经在 SO 和其他地方测试了所有可能的答案，但它在 Chrome 或 Firefox 上不起作用。 例如，假设我们有一个表单:
This answer作者 Jan Burse 展示了 Prolog 中元解释器的最简单实现之一: solve(true) :- !. solve((A,B)) :- !, solve(A), sol
赏金 我在谷歌上搜索它以找到类似的库，但我没有找到......如果有人知道你可以给出答案(仅限 Vanilla js 库和麻省理工学院许可证)...... 否则不要更改 html 结构...修复我的代
我是Rust的新手，试图了解基本的目录遍历。我发现的几乎所有示例都利用了walkdir或glob库，这些库我都取得了很好的成功。但是，我现在正尝试仅使用std lib来执行此操作。 标准lib文档中有
我正在尝试通过事件监听器只需单击一次即可触发函数。但如果我在一次单击后不执行 F5 触发操作，则会在两次单击(第一次)后发生。 代码: HTML ....
我的单页网站在 vanilla js 中有一个平滑的滚动，我尝试在没有 jquery 的情况下实现它，我想添加一个像 cubic bezier 这样的计时函数。有没有办法在 javascript 中做
对于一个小项目，我想制作一个基于浏览器引擎检测浏览器的小型库: var engine = { opera: function(){ var ua = navigator.userAgent.t
嘿，我想弄清楚如何让我的脚本在加载元素时等待执行它的一部分，但目前它主要只是传递它，而不是等待它。在 vanilla js 中最好的方法是什么？ 这是代码 this.heading = documen
我正在复制一个 simon 游戏原型(prototype)，我正在尝试在 vanilla js 中为按钮闪烁编写一个函数。 目前我有以下功能: function blinkColor(color) {
我正在构建一个类似于 eclipse 刻草图的交互式网格。我已经设置了网格，现在正在尝试设置“悬停”效果，以便当鼠标经过网格 div 时改变颜色，从而像钢笔一样在网格中留下(像素化)轨迹。但我希望颜色
我正在为我在大学的一个科目开发一个元素，包括用纯 javascript 做一个下拉列表过滤器，以过滤 html/css 中的图像网格。导致我出现问题的是这个过滤器需要同时处理 3 个下拉列表。例如，如
我有一个带有主要 div 的简单旋转木马。在主 div 中有一个宽度为 6000px 的 ul，每当我单击向右或向左箭头时，它就会滑动。 我将事件监听器附加到两个箭头，所以当我单击左箭头时，我将 30
我正在研究构造 Vanilla 网络组件。我以前使用过 Polymer，我喜欢这样一个事实，即您可以在一个文件中为您的组件提供模板、样式和 JavaScript。如果可能的话，我想用“ Vanilla
我找到了这个粘性 div 代码段并对其进行了修改，使其在 div 到达页面顶部时看起来粘在窗口底部。我只是好奇是否有某种方法可以抵消底部。这是代码:- let Sticky = (function()
所以我遇到了这个问题，我需要根据一些变量为复选框设置一个值。 问题是我在将要使用的 HTML 上遇到了下一个命名约定: 要决定选择哪个输入，我通常会这样做: document.getEleme
我正在练习 VHDL，我有一个关于不需要过程的“简单”语句的基本问题。 我想知道两者的区别 c <= a and b; 语句不在进程内，只是在架构开始之后编写，并且 process(a,b) begi
在客户处，我们的一个 WPF 应用程序开始挂起。在尝试使用最小的工作示例重现问题时，我发现即使是最基本的(非平凡的)WPF 应用程序也会卡在该机器上。 示例 A : 在 Visual Studio 2
我按照教程制作了一个使用 localstorage 的购物车。现在我正在尝试对其进行调整以适应我自己的需要，以扩展我对 JavaScript 的知识并给自己更多的练习。讲师为每个单独的项目总计做了一个
我需要修改 Vanilla 元解释器，以便进行有限深度的搜索。我正在使用以下代码来测试我的解决方案: value(wire1,1). connected(wire2, wire1). connecte
我是一名优秀的程序员,十分优秀！