Resolve "Get existing playlists from api"

Closes #51 (closed)

assets/app.js

@@ -14,3 +14,52 @@ window.pickRandomArtists = function () {
         artistElements[random].click();
     }
 };
+
+/* get playlists and update form */
+window.getPlaylists = function () {
+    var containerElement = document.getElementById("user-playlists");
+    if (containerElement) {
+        var htmlContent = "";
+
+        var apiUrl = "playlists/user";
+        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"
+                            id="check-playlist-PLAYLIST_ID"
+                            name="selected-playlist[]"
+                            value="PLAYLIST_ID"
+                        >
+                        <label class="custom-control-label" for="check-playlist-PLAYLIST_ID">
+                            <span class="spotify-image"><img src="PLAYLIST_IMAGE_URL" style="max-height: 1rem; max-width: 1rem;" /></span>
+                            PLAYLIST_NAME
+                        </label>
+                        </div>
+                    </li>
+                `;
+
+                data.forEach((playlist) => {
+                    htmlContent += htmlTemplate
+                        .replace(/PLAYLIST_ID/g, playlist["id"])
+                        .replace(/PLAYLIST_NAME/g, playlist["name"])
+                        .replace(/PLAYLIST_IMAGE_URL/g, playlist["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();