こんにちは！最近ブログ更新が楽しいkentaです！
最近ポケモンのAPIの記事を書いたんですけど他にもないか探してみたら見つけちゃいましたジブリのAPI！これはもう触るしかないと脳が叫んでいたので何が取れるかやってみようと思います。
データを取得する
前回のポケモンと同じ形式でデータを取得していこうと思います！
const url = `https://ghibliapi.herokuapp.com/films`;
fetch(url)
.then(function(response){
return response.json();
})
.then(function(ziburi){
console.log(ziburi)
})https://ghibliapi.herokuapp.com/films
今回はこれで取得することができます。
取れる作品は22作品！！
作品名、監督、バナー画像、ポスター画像、登場人物の情報などパッと見てみただけでもたくさんの情報があって多分すべて把握するのにすごい時間がかかりそうでした笑
名前を取得してみる
全部解説しようとするときりがないので今回は名作「天空の城ラピュタ」の主な登場人物を表示させてみようと思います。
<body>
<h1></h1>
<ul></ul>
</body>htmlにはこれだけ用意しておいてください。
ulの中にliを作ってそこに登場人物を入れていこうと思います
h1にはタイトルを載せます。
const url = `https://ghibliapi.herokuapp.com/films`;
const characterurl=[];
let ul = document.querySelector("ul");
let h1 = document.querySelector("h1")
fetch(url)
.then(function(response){
return response.json();
})
.then(function(ziburi){
let character = ziburi[0].people;
h1.innerHTML=ziburi[2].original_title
for(let i=0;i<=character.length;i++){
characterurl[i] = character[i];
fetch(characterurl[i])
.then(function(response){
return response.json();
})
.then(function(namelist){
let name = namelist.name;
let li = document.createElement("li");
li.innerText=name;
ul.appendChild(li);
})
console.log(characterurl)
}
})これで取得できると思います！！
英語なので分かりづらいですけどコピペして調べてみてください！
ちゃんとシータが出てきます笑
他にも性別とか年齢も取得できるみたいなので今度は性別や年齢によって文字の色とか変えれるようにしたいですね〜できたらまたブログを書こうと思います！