今回はかなり前にポケモンのAPIを使用して簡単な図鑑の作成をしてみようと思います。
前回このような記事を書いたので是非こちらも見てください～
今回作成したもの
See the Pen
Untitled by kenta66448284 (@kenta66448284)
on CodePen.0
今回作成したものはポケモンの一覧と上にある検索の個所に数字を入力するとその図鑑ナンバーに合わせたポケモンの画像と名前分類、タイプが表示されるようになっている仕組みです。
前回からの修正点
前回はタイプや名前など、いろいろなデータが基本英語になっていたため他の方が作成されたデータをお借りして日本語の表示を行っていましたが、調べてみるとちゃんと取得ができたのでそのように修正しました。
const listurl = "https://pokeapi.co/api/v2/pokemon/1";
fetch(listurl)
.then(function(response){
return response.json();
})
.then(function(deta){
let nameurl = list.species.url;//日本語名前の取得ができるAPIの取得
fetch(nameurl)
.then(function(pname){
return pname.json();
})
.then(function(namedate){
let japanname = namedate.names[0].name;//現在は[0]を設定しているので日本語になっているが他の数値にすると他の国の名前になる
console.log(japanname)
})
})このようにAPIがあり、その中に他のAPIのURLがあるのでそれを利用する！という形になります。
今回、日本語の名前を取得するにはspeciesという場所から取得するようにします。
他に名前以外にも、分類やspeciesから取得できます。
//二行目の0のところは括弧が必要なのでエラーが出た場合は試してみてください。
let japangenera = nadeta.genera.0.genus//分類を表示する
console.log(japangenera)分類を入れたい場合は16行目以降にこの処理を置きましょう！おそらく表示されるはずです。
まとめ
今回、このようなものを作成して、まだまだ、修正点を感じました。
ポケモン一覧の個所もクリックしたら上に詳細が表示されたりとか、、数えだしたらきりがないので少しずつ修正していきたいです！