PokeAPI - 查詢額外的口袋妖怪信息
[英]PokeAPI - querying additional pokemon info
問題描述
我目前正在學習如何使用 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>' ) ); } } })
1 個解決方案
解決方案1
0 已采納 2020-10-05 02:59:17
如果您想了解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 中使用的 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>
我將如何遍歷 pokeAPI 以獲取所有后續 pokemon 數據？
[英]How would I iterate through pokeAPI to get all subsequent pokemon data?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.