我目前正在学习如何使用 onsen.io，我正在使用 PokiAPI 进行学习。感谢@sandeep joshi，我之前曾使用“https://pokeapi.co/api/v2/pokemon?limit=151”帮助我在一个列表中显示所有 151 个口袋妖怪的名字。
我不知道我需要进行另一个查询才能获取诸如“能力”、“元素”等其他信息，但我不知道该怎么做，任何帮助将不胜感激！
这是我的代码：
<!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 应用程序，我在 google 上搜索了一下，并在纯 javascript 中找到了一个很棒的教程。在这里，我得到了信息，要获取有关 pokemon 的个人数据，您需要使用 pokemon 索引号而不是旧方式查询 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 个 pokemon 的数据，但 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-list 中使用的 pokemon 对象（名称、id、图像、类型、能力、移动）数组。我希望，我已经尽可能多地解释了，但请随时在评论中提出后续问题（如果有）。
我在样式方面做得并不多，所以列表可能看起来很丑，但既然你正在学习Onsen-UI，那么构建一个漂亮的图鉴并向我们展示这将是一个很好的学习/任务。
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>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句