Get top artists from API

assets/app.js

@@ -62,4 +62,52 @@ window.getPlaylists = function () {
     }
 };
 
+/* get artists and update form */
+window.getTopArtists = function () {
+    var containerElement = document.getElementById("user-top-artists");
+    if (containerElement) {
+        var htmlContent = "";
+
+        var apiUrl = "artists/top";
+        fetch(apiUrl)
+            .then(function (response) {
+                return response.json();
+            })
+            .then(function (data) {
+                const htmlTemplate = `
+                  <li class="col">
+                    <div class="custom-control custom-checkbox">
+                      <input
+                        type="checkbox"
+                        class="custom-control-input checkbox-artist"
+                        id="check-top-artist-ARTIST_ID"
+                        name="selected-artist[]"
+                        value="ARTIST_ID"
+                      >
+                      <label class="custom-control-label" for="check-top-artist-ARTIST_ID">
+                        <span class="spotify-image"><img src="ARTIST_IMAGE_URL" style="max-height: 1rem; max-width: 1rem;" /></span>
+                        ARTIST_NAME
+                      </label>
+                    </div>
+                  </li>
+                `;
+
+                data.forEach((artist) => {
+                    htmlContent += htmlTemplate
+                        .replace(/ARTIST_ID/g, artist["id"])
+                        .replace(/ARTIST_NAME/g, artist["name"])
+                        .replace(/ARTIST_IMAGE_URL/g, artist["imageUrl"]);
+                });
+                containerElement.innerHTML = htmlContent;
+            })
+            .catch(function (err) {
+                console.warn("Something went wrong.", err);
+                htmlContent =
+                    '<div class="alert alert-warning">Error fetching API data.</div>';
+                containerElement.innerHTML = htmlContent;
+            });
+    }
+};
+
 getPlaylists();
+getTopArtists();

src/Controller/ArtistController.php

+<?php
+
+namespace App\Controller;
+
+use App\Service\SpotifyApiService;
+use App\Service\SpotifyPlaylistService;
+use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\HttpFoundation\JsonResponse;
+use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\Routing\Annotation\Route;
+
+class ArtistController extends AbstractController
+{
+    /** @var SpotifyWebAPI */
+    private $spotifyApi;
+
+    public function __construct(SpotifyApiService $spotifyApiService)
+    {
+        // increase timeout limit
+        set_time_limit(60);
+
+        $this->spotifyApi = $spotifyApiService->createApi();
+    }
+
+    /**
+     * @Route("/artists/top", name="get-artists-top")
+     *
+     * @return Response
+     */
+    public function getArtists(): Response
+    {
+        $rawTopArtists = $this->spotifyApi->getMyTop(
+            'artists',
+            [
+                'limit' => SpotifyPlaylistService::TOP_ARTISTS_COUNT,
+                'time_range' => 'short_term'
+            ]
+        )->items;
+
+        $artists = [];
+        foreach ($rawTopArtists as $artist) {
+            $artists[] = [
+                'id' => $artist->id,
+                'name' => $artist->name,
+                'imageUrl' => $artist->images[\count($artist->images) - 1]->url,
+            ];
+        }
+
+        return new JsonResponse($artists);
+    }
+}

src/Controller/PlaylistController.php

@@ -37,17 +37,8 @@ class PlaylistController extends AbstractController
     {
         $me = $this->spotifyApi->me();
 
-        $topArtists = $this->spotifyApi->getMyTop(
-            'artists',
-            [
-                'limit' => SpotifyPlaylistService::TOP_ARTISTS_COUNT,
-                'time_range' => 'short_term'
-            ]
-        )->items;
-
         return $this->render('playlist-generator/index.html.twig', [
             'user' => $me,
-            'topArtists' => $topArtists,
         ]);
     }
 

templates/playlist-generator/index.html.twig

@@ -4,7 +4,6 @@
 
 {% block content %}
 
-    {% if topArtists is defined %}
     <form class="clearfix mt-2" action="{{ path('generate-quick-playlist') }}">
       <div class="row">
         <div class="col-md-12">
@@ -47,27 +46,8 @@
           </div>
         </div>
       </div>
-        <ul class="list-unstyled row row-cols-md-4 row-cols-2">
-          {% for artist in topArtists %}
-            <li class="col">
-              <div class="custom-control custom-checkbox">
-                <input
-                  type="checkbox"
-                  class="custom-control-input checkbox-artist"
-                  id="check-top-artist-{{ artist.id }}"
-                  name="selected-artist[]"
-                  value="{{ artist.id }}"
-                >
-                <label class="custom-control-label" for="check-top-artist-{{ artist.id }}">
-                  {% if artist.images is defined %}
-                  {% set artistLastImage = artist.images|last %}
-                    <span class="spotify-image"><img src="{{ artistLastImage.url }}" style="max-height: 1rem; max-width: 1rem;" /></span>
-                  {% endif %}
-                  {{ artist.name }}
-                </label>
-              </div>
-            </li>
-          {% endfor %}
+      <ul class="list-unstyled row row-cols-md-4 row-cols-2" id="user-top-artists">
+
       </ul>
       <div class="row">
         <div class="col-md-8 col-sm-12">
@@ -105,7 +85,6 @@
         </div>
       </div>
     </form>
-    {% endif %}
 
     <form class="clearfix" action="{{ path('generate-playlist-from-playlists') }}">
       <legend>Generate playlist from tracks in existing playlist:</legend>