前提・実現したいこと
YouTubeAPIを用いて再生回数などの情報を含めた動画リンクを、複数個Ajaxで出力するコードを作成しています。
何回も同じコードを書くと冗長化してしまうので、短縮化してスマートにさせたく、調べたのですが、上手い書き方がわかりません…。
articleタグのIDに連番(#youtube_01~#youtube_04)を付けながら同じ処理を指定回数(4回)繰り返す
にはどう書くのが良いでしょうか。
該当のソースコード
codepen
↑【APIKEY】を入力で動作します。
下記にも同じコードを記載します。
HTML
<article id="youtube_01" class="youtube"> <a id="js-youtube-link_01" href="" class="youtube-link"> <div class="youtube-image-wrap"> <img id="js-youtube-image_01" src="" class="youtube-image"> <span id="js-youtube-duration_01" class="youtube-duration"></span> </div> <div class="youtube-content"> <h1 id="js-youtube-title_01" class="youtube-title"></h1> <div class="youtube-detail"> <span id="js-youtube-channel_01" class="youtube-channel" data-href=""></span> • <span id="js-youtube-views_01"></span> 回視聴 • <span id="js-youtube-date_01"></span> </div> </div> </a> </article>
jQuery
//リクエストパラメーターのセット const KEY = '【APIKEY】' ;// APIKEY const ID = 'bjmBJ1Fl0cs' ;// 動画ID let url = 'https://www.googleapis.com/youtube/v3/videos'; // APIURL url += '?id=' + ID; url += '&key=' + KEY; url += '&part=snippet,contentDetails,statistics,status'; //Ajax通信をする $(function(){ $.ajax({ url: url, dataType : 'json' }).done(function(data){ // URL $('#js-youtube-link_01').attr('href', `https://www.youtube.com/watch?v=bjmBJ1Fl0cs`); // サムネイル $('#js-youtube-image_01').attr('src', data.items[0].snippet.thumbnails.medium.url); // タイトル $('#js-youtube-title_01').append(data.items[0].snippet.title); // チャンネル名 $('#js-youtube-channel_01').append(data.items[0].snippet.channelTitle); // 再生回数 $('#js-youtube-views_01').append(data.items[0].statistics.viewCount); // 再生時間 let duration = data.items[0].contentDetails.duration; let convertDuration = moment.duration(duration).format(); $('#js-youtube-duration_01').append(convertDuration); // 投稿日時 moment.locale('ja'); let date = data.items[0].snippet.publishedAt; let convertDate = moment(date).fromNow(); $('#js-youtube-date_01').append(convertDate); }).fail(function(data){ console.log('通信に失敗しました。'); }); });
試したこと
・上記のコードを単純に4つ複製して「_01」の数字を変える。
・参考にさせていただいたコードは下記になります。
https://codepen.io/hatsushi_kazuya/pen/KKwzYNE
初心者で恐縮ですが、よろしくお願いいたします。
まだ回答がついていません
会員登録して回答してみよう