javascript - PokeAPI - 查询额外的口袋妖怪信息
问题描述
我目前正在学习如何使用 onsen.io,并且正在使用 PokiAPI 来学习。感谢@sandeep joshi,我之前曾帮助使用“https://pokeapi.co/api/v2/pokemon?limit=151”在 ons-list 中显示所有 151 个 Pokemon 的名称。
我不知道我需要进行另一个查询才能获取“能力”、“元素”等其他信息,我不知道该怎么做,任何帮助将不胜感激!
这是我的代码:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
<link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
<script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<ons-navigator id="myNavigator" page="main-temp"></ons-navigator>
<!-- ******************** main-template ******************** -->
<template id="main-temp">
<ons-page id="main-page">
<ons-toolbar style="background-color: red;">
<div class="center" style="color: #fff;">Pokedex</div>
</ons-toolbar>
</ons-page>
</template>
<!-- ******************** list template ******************** -->
<ons-page id="list-page">
<div class="content content-container">
<ons-list id="list-item"></ons-list>
</div>
</ons-page>
<!-- ******************** spinner modal ******************** -->
<ons-modal id="spinner-modal">
<div style="margin: auto;">
<ons-icon icon="md-spinner" size="100px" spin></ons-icon>
</div>
</ons-modal>
</body>
</html>
ons.ready(function() {
var spinnerModal = document.querySelector('#spinner-modal');
spinnerModal.show();
var settings = {
"url": `https://pokeapi.co/api/v2/pokemon?limit=151`,
"method": "GET",
"timeout": 0,
};
$.ajax(pokemonData)
.done(function(result) {
sendData(result.results); // result.results contains pokemon list :)
let results = result;
console.log(results);
})
.fail(function(xhr, status, error) {
console.log('error:' + xhr.status);
})
.always(function() {
spinnerModal.hide();
})
function sendData(jsonData) {
var itemsList = document.getElementById('list-item'); // this is no longer null since this is no longer part of template.
for (let i = 1; i < jsonData.length; i++) {
itemsList.appendChild(
ons.createElement(
'<ons-card class="inside-cards">' +
'<ons-list>' +
'<ons-list-item modifier="tappable>' +
'<div class="left" >' +
jsonData[i].id +
'</div>' +
'<div class="" style="margin-left:20px;" >' +
'<ons-icon icon="fa-canadian-maple-leaf"></ons-icon>' + ' ' + jsonData[i].url + "<br><br>" +
'<ons-icon icon="fa-canadian-maple-leaf"></ons-icon>' + ' ' + jsonData[i].name + "<br><br>" +
'<ons-icon icon="fa-canadian-maple-leaf"></ons-icon>' + ' ' + jsonData[i].name + "<br><br>" +
'</div>' +
'<div>' +
'</div>' +
'</ons-list-item>' +
'</ons-list>' +
'</ons-card>'
)
);
}
}
})
解决方案
如果你想了解pokedex 应用程序,我用谷歌搜索了一下,发现了一个很棒的纯 javascript 教程。在这里,我得到了获取有关口袋妖怪的个人数据的信息,您需要使用口袋妖怪索引号而不是通过旧方式查询 url。所以我通过参考教程添加了一些代码。
一些解释。
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()));
}
这部分获取所有 150 个口袋妖怪的数据,但 API 返回一个承诺,因此我们将所有承诺推送到一个数组中。
Promise.all(promises).then(results => {
const pokemon = results.map(data => ({
name: data.name,
id: data.id,
image: data.sprites["front_default"],
type: data.types.map(type => type.type.name).join(", "),
ability: data.abilities.map(ability => ability.ability.name).join(','),
moves: data.moves.map(move => move.move.name).slice(0, 10).join(', ')
}));
sendData(pokemon);
})
接下来,一旦所有问题promises
都解决了,我们将使用array.map
函数从结果中迭代每个项目并构建我们将在我们的 ons 列表中使用的 pokemon 对象(名称、id、图像、类型、能力、移动)数组。我希望,我已经尽可能多地解释了,但请随时在评论中提出后续问题(如果有的话)。
我在样式方面做得不多,所以列表可能看起来很难看,但是由于您正在学习Onsen-UI ,因此构建一个漂亮的pokedex并向我们所有人展示 将是一个很好的学习/任务。
ons.ready(function() {
var spinnerModal = document.querySelector('#spinner-modal');
spinnerModal.show();
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(data => ({
name: data.name,
id: data.id,
image: data.sprites["front_default"],
type: data.types.map(type => type.type.name).join(", "),
ability: data.abilities.map(ability => ability.ability.name).join(','),
moves: data.moves.map(move => move.move.name).slice(0, 10).join(', ')
}));
sendData(pokemon);
})
.catch((reason) => {
if (reason === -999) {
console.error("Had previously handled error");
} else {
console.error(`Trouble with promiseGetWord(): ${reason}`);
}
})
.finally((info) => spinnerModal.hide());
function sendData(jsonData) {
debugger;
var itemsList = document.getElementById('list-item'); // this is no longer null since this is no longer part of template.
for (let i = 0; i < jsonData.length; i++) {
itemsList.appendChild(
ons.createElement(
'<ons-card class="inside-cards"><ons-list><ons-list-header>' + jsonData[i].name + '</ons-list-header><ons-list-item modifier="tappable>' +
'<div class="left" ></div><div class="" style="margin-left:20px;" ><ons-icon icon="fa-hashtag"></ons-icon>' + ' ' + jsonData[i].name + "<br><br>" +
'<div class="right"><ons-icon icon="fa-thumbs-up"></ons-icon><img src=" ' + jsonData[i].image + '"></div>' + "<br><br>" +
'<ons-icon icon="fa-user"></ons-icon> type : ' + jsonData[i].type + "<br><br>" +
'<ons-icon icon="fa-user"></ons-icon> Abilities : ' + jsonData[i].ability + "<br><br>" +
'<ons-icon icon="fa-user"></ons-icon> Moves/Attacks : ' + jsonData[i].moves + "<br><br>" +
'<div>' +
'</div>' +
'</ons-list-item>' +
'</ons-list>' +
'</ons-card>'
)
);
}
}
})
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
<link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
<script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<ons-navigator id="myNavigator" page="main-temp"></ons-navigator>
<!-- ******************** main-template ******************** -->
<template id="main-temp">
<ons-page id="main-page">
<ons-toolbar style="background-color: red;">
<div class="center" style="color: #fff;">Pokedex</div>
</ons-toolbar>
</ons-page>
</template>
<!-- ******************** list template ******************** -->
<ons-page id="list-page">
<div class="content content-container">
<ons-list id="list-item"></ons-list>
</div>
</ons-page>
<!-- ******************** spinner modal ******************** -->
<ons-modal id="spinner-modal">
<div style="margin: auto;">
<ons-icon icon="md-spinner" size="100px" spin></ons-icon>
</div>
</ons-modal>
</body>
</html>
推荐阅读
- sql - 如何根据特定条件选择记录
- sql-server - Windows 任务计划程序未通过 .Net exe 连接到 SQL Server 数据库
- sql - 引用外键并为父表中的列添加检查约束
- reactjs - 如何在 React 中使用来自不同 js 文件的 let 值到 app.js
- c# - 在 .NET 核心应用程序中安全使用/存储密码
- javascript - 如何在 JavaScript 中访问 Django 脆标签数组?
- c# - 动态替换时,带有 ASP.NET MVC的标记中的空 href调用默认路由
- robolectric - 如何使用 AndroidX 片段测试来测试选项菜单?
- sql - PostgreSQL 交叉表转置行到列
- apache-spark - H2O 苏打水是否允许以 Kafka 作为流源进行在线培训