PokeAPI - 查询额外的口袋妖怪信息 [英] PokeAPI - querying additional pokemon info
本文介绍了PokeAPI - 查询额外的口袋妖怪信息的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我目前正在学习如何使用 onsen.io，我正在使用 PokiAPI 进行学习.我之前帮助过使用https://pokeapi.co/api/v2/pokemon?limit=151"感谢@sandeep joshi，在列表中显示所有 151 只口袋妖怪的名字.
我不知道我需要进行另一个查询才能获取诸如能力"、元素"等其他信息，但我不知道该怎么做，任何帮助都会非常有用赞赏！
这是我的代码:
<头><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><ons-navigator id="myNavigator" page="main-temp"></ons-navigator><!-- ******************** 主模板 ******************** --><模板 id="main-temp"><ons-page id="main-page"><ons-toolbar style="background-color: red;"><div class="center" style="color: #fff;">图鉴</div></ons-工具栏></on-page><!-- ******************** 列表模板 ******************** -->;<ons-page id="list-page"><div class="content content-container"><ons-list id="list-item"></ons-list></on-page><!-- ******************** 微调模态 ******************** -->;<ons-modal id="spinner-modal"><div style="margin: auto;"><ons-icon icon="md-spinner" size="100px" spin></ons-icon>
</ons-modal></html>
ons.ready(function() {var spinnerModal = document.querySelector('#spinner-modal');spinnerModal.show();变量设置 = {"url": `https://pokeapi.co/api/v2/pokemon?limit=151`,"方法": "获取",超时":0，};$.ajax(pokemonData).完成(功能(结果){发送数据(结果.结果)；//result.results 包含 pokemon 列表 :)让结果=结果；控制台日志(结果)；}).fail(function(xhr, status, error) {console.log('错误:' + xhr.status);}).总是(功能(){spinnerModal.hide();})函数发送数据(jsonData){var itemsList = document.getElementById('list-item');//this 不再为空，因为 this 不再是模板的一部分.for (让 i = 1; i < jsonData.length; i++) {itemsList.appendChild(ons.createElement('<ons-card class="inside-cards">'+''+'<ons-list-item 修饰符="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 + "
"+'<ons-icon icon="fa-canadian-maple-leaf"></ons-icon>'+ ' ' + jsonData[i].name + "
"+'<ons-icon icon="fa-canadian-maple-leaf"></ons-icon>'+ ' ' + jsonData[i].name + "
"+'</div>'+''+'</div>'+'</ons-list-item>'+'</on-list>'+'</卡上>'));}}}) 解决方案
如果你想了解 pokedex 应用程序.在这里，我得到了信息，要获取有关 pokemon 的个人数据，您需要使用 pokemon 索引号而不是旧方式查询 url.所以我参考教程添加了一些代码.
一些解释.
const promises = [];for (让 i = 1; i <= 150; i++) {const url = `https://pokeapi.co/api/v2/pokemon/${i}`;promises.push(fetch(url).then(res => res.json()));}这部分获取所有 150 个 pokemon 的数据，但 API 返回一个 promise 所以我们将所有的 promise 都推送到一个数组中.
Promise.all(promises).then(results => {const pokemon = results.map(data => ({名称:data.name，id:data.id，图像:data.sprites[front_default"]，类型:data.types.map(type => type.type.name).join(", "),能力:data.abilities.map(ability =>ability.ability.name).join(','),移动: data.moves.map(move => move.move.name).slice(0, 10).join(', ')}));发送数据(口袋妖怪)；})接下来一旦所有 promises 都解决，然后我们使用 array.map 函数来遍历结果中的每个项目并构建我们的 pokemonobject(name,id, image, type, ability, Movement) 数组，我们将在我们的 ons 列表中使用它.我希望，我已经尽可能多地解释了，但请随时在评论中提出后续问题(如果有).
我在样式方面做得不多，所以列表可能看起来很难看，但因为你正在学习 Onsen-UI 构建一个漂亮的图鉴并向我们展示将是很好的学习/任务.
ons.ready(function() {var spinnerModal = document.querySelector('#spinner-modal');spinnerModal.show();const 承诺 = [];for (让 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 => ({名称:data.name，id:data.id，图像:data.sprites["front_default"],类型:data.types.map(type => type.type.name).join(", "),能力:data.abilities.map(ability =>ability.ability.name).join(','),移动: data.moves.map(move => move.move.name).slice(0, 10).join(', ')}));发送数据(口袋妖怪)；}).catch((原因) => {如果(原因 === -999){console.error("之前处理过错误");} 别的 {console.error(`promiseGetWord() 有问题:${reason}`);}}).finally((info) => spinnerModal.hide());函数发送数据(jsonData){调试器；var itemsList = document.getElementById('list-item');//this 不再为空，因为 this 不再是模板的一部分.for (让 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 + "
"+'<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>类型:' + jsonData[i].type + "<br><br>"+'<ons-icon icon="fa-user"></ons-icon>能力:' + jsonData[i].ability + "<br><br>"+'<ons-icon icon="fa-user"></ons-icon>移动/攻击:' + jsonData[i].moves + "<br><br>"+''+'</div>'+'</ons-list-item>'+'</on-list>'+'</卡上>'));}}})<头><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><身体><ons-navigator id="myNavigator" page="main-temp"></ons-navigator><!-- ******************** 主模板 ******************** --><模板 id="main-temp"><ons-page id="main-page"><ons-toolbar style="background-color: red;"><div class="center" style="color: #fff;">图鉴</div></ons-工具栏></on-page><!-- ******************** 列表模板 ******************** -->;<ons-page id="list-page"><div class="content content-container"><ons-list id="list-item"></ons-list>
</on-page><!-- ******************** 微调模态 ******************** -->;<ons-modal id="spinner-modal"><div style="margin: auto;"><ons-icon icon="md-spinner" size="100px" spin></ons-icon>
</ons-modal></html>
I'm currently learning how to use onsen.io and I'm using the PokiAPI to learn. I had helped earlier using "https://pokeapi.co/api/v2/pokemon?limit=151" to display the names of all 151 Pokemons in an ons-list thanks to @sandeep joshi.
I didn't know I need to make another query to be able to grab additional info like "abilities", "elements"..etc and I'm not sure how to do that, any help would be greatly appreciated!
Here's my code:
<!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>'
)
);
}
}
})
解决方案
I googled a little bit and found a great tutorial in plain javascript if you want to learn about pokedex application. here I got the information that to get the individual data about the pokemon you need to query the url with pokemon index number and not by the older way. so I have added some code by referencing the tutorial.
some explanation.
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()));
}
this part fetches data for all 150 pokemons but API returns a promise so we are pushing all the promises in one array.
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);
})
next once all the promises are resolved then we are using array.map function to iterate through each item from result and building our pokemon object(name,id, image, type, ability, moves) array which we are gonna use in our ons-list. I hope, I have explained as much as I could, but feel free to ask followup questions(if any) in comment.
I have not done much with styling so the list may be looking ugly but since you are learning the Onsen-UI it will be good learning/task to build a great looking pokedex and show us all.
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>
这篇关于PokeAPI - 查询额外的口袋妖怪信息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
