APIを使って音楽を聴くきっかけを作ろう⑭

UGOKのヨコチ🦖です。

前回は類似アーティストのCDジャケットの表示を行いました。制作しているウェブアプリケーションの概要はこちらです。

今回やること

前回は、Spotify Web APIを使って「日本トップ50」という名前のプレイリストに載っている曲のCDジャケット画像をランダムに表示させ、そこから選択したCDジャケット画像のアーティストの類似アーティストのCDジャケットを表示させました。

今回は、表示させた9枚の類似アーティストのCDジャケットから選択したCDの詳細を表示させようと思います。

https://gist.github.com/yochn/0452a43e16587be43aadb26f7fc45979

gonextDetail: function (num) {
  this.selectedNum = num;
  this.nextsongFlag = false;
  this.nextdetailFlag = true;

  const self = this;
  fetch("./next/" + self.genreid[num])
.then(function (res) {                
    return res.json();
  })
.then(function (data) {
    self.nexttrackdata = data;
    self.artist = data.tracks[0].artists[0].name; //アーティスト名
    self.track = data.tracks[0].name; //曲名
    self.album = data.tracks[0].album.name; //アルバム名
    self.selectArtistid = data.tracks[0].artists[0].id; //アーティストID
  });
}

以前、選択したCDジャケットの詳細を表示させたときと同様のコードを書き、CDの詳細を表示させます。以前と異なるところは、呼び出すAPI（fetch("./next/" + self.genreid[num])）が異なるところです。

実行結果

以前と同様におこなったので意外とすんなりとできたのですが、選択したCDジャケット画像と表示される詳細の内容が異なっており、なんでだ😔となっていました・・・そこについてはブログもう一つ書きます・・・

：今後について

繰り返して類似アーティストを表示させるようにします。その前に、1つ問題があったのでそれについてのブログを先に書こうと思います～～☺