こんにちはkentaです！！
前回の記事で再生リストのデータの取得ができました！
なので今回はそのデータの動画の名前を実際にHTML上に表示させてみましょう！
準備
まず最初に前回のブログでも書いたコードを入力してきましょう！
詳しくはこちらに書いてあるので見てみてください！
const Url=`https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&maxResults=50&playlistId=/*ここに再生リストのIDを入れる*/&key=/*ここにAPIキーを入れる*/
fetch(Url)
.then(function (response) {
return response.json();
})
.then(function(deta){
console.log(deta)
})現在これでdetaの中に情報が入っています！！
bodyの中に表示させる
この中のどこに今回動画の名前があるかというとdeta.item.snippet.titleの中に入っています！
ですが再生リストに動画が複数あるとitemが複数個あってどれを取得してよいのかわからないのでまずはconsole.logで全て表示させるプログラムにしてみましょう。
.then(function(deta){
console.log(deta)
let namelist=[];
for(let i = 0;i<deta.items.length;i++){
namelist[i]=deta.items[i].snippet.title
}
console.log(namelist)
})変数namelistを作成しその中に名前を代入する処理をしています。
このプログラムを実行するとconsoleに曲名が表示されると思います。
ここまでこれたら後もう少しです！
.then(function(deta){
console.log(deta)
let body=document.querySelector("body")
let namelist=[];
let ul =document.createElement("ul")
for(let i = 0;i<deta.items.length;i++){
let li= document.createElement("li")
namelist[i]=deta.items[i].snippet.title;
li.innerText=namelist[i]
ul.appendChild(li)
}
body.appendChild(ul)
console.log(namelist)
})
for文の中にli要素を作成しその中にタイトルを代入しul要素にappendChildをしています。
繰り返し処理が終わった後にul要素をbodyに入れることを忘れないようにしましょう。
最後に
これで再生リストにある動画の名前を表示させることができました！！
これと同じ方法で動画のidなども取得できるので調べてみるといいかもしれません！！