- main.js:

fixed bug in the filterButton EventListener (removed if-clause)
added new EventListener for fetching categories
updated fetchCategories()

src/main/resources/static/dataset.js

@@ -37,7 +37,7 @@ export default class Dataset {
         clone.querySelector("p").innerText = this.#description;
         clone.querySelector("span").innerText = this.#upvotes;
         let votedIDs = window.localStorage;
-        // depending on whether the button has been up/downvoted, its according button get disabled and hidden
+        // depending on whether the button has been up/downvoted, its according button gets disabled and hidden
         if (votedIDs.getItem(this.#id)) {
             let votedButton = clone.querySelector(votedIDs.getItem(this.#id)? ".upvote-btn":".downvote-btn");
             votedButton.classList.add("isVoted");
@@ -57,8 +57,4 @@ export default class Dataset {
 
         return clone;
     }
-
-    getID() {
-        return this.#id;
-    }
 }

src/main/resources/static/main.js

@@ -9,6 +9,7 @@ export const lastQuery = {
     currentPage: 0
 };
 const votedIDs = window.localStorage;
+const loadedCategories = new Set;
 
 // definition of all buttons & sections
 const addButton = document.getElementById("add-btn");
@@ -33,12 +34,13 @@ addButton.addEventListener("click", () => {
 });
 
 filterButton.addEventListener("change", () => {
-    const filterString = filterButton.value;
-    if (filterString !== filterButton.querySelector("#default-filter").value) {
-        fetchQuery(createQuery(), true);
-    }
+    fetchQuery(createQuery(), true);
 });
 
+filterButton.addEventListener("click", () => {
+    fetchCategories();
+})
+
 searchButton.addEventListener("click", () => {
     fetchQuery(createQuery(), true);
 
@@ -99,7 +101,7 @@ function getFilterQuery() {
     } else if (document.querySelector('#filter-btn option:checked').parentElement.label === "Standard categories") {
         return ["type", filterString];
     } else {
-        return ["category", filterString];
+        return ["category", filterButton.options[filterButton.selectedIndex].value]
     }
 }
 
@@ -177,15 +179,18 @@ function updateSections() {
 
 // fetches the further categories used in the filter function
 function fetchCategories() {
-    const fetchURL = new URL(
-        "api/v1/categories", baseURL);
+    const fetchURL = new URL("api/v1/categories", baseURL);
     fetch(fetchURL)
         .then(resp => resp.json())
         .then((data) => {
             for (let i = 0; i < data.length; i++) {
-                let category = data[i].toLowerCase();
-                category = category.charAt(0).toUpperCase() + category.slice(1);
-                document.getElementById("other-categories").appendChild(new Option(category));
+                let categoryName = data[i].name.toLowerCase();
+                categoryName = categoryName.charAt(0).toUpperCase() + categoryName.slice(1);
+                if (!loadedCategories.has(categoryName)) {
+                    let newCategory = new Option(categoryName, data[i].id);
+                    document.getElementById("other-categories").appendChild(newCategory);
+                    loadedCategories.add(categoryName);
+                }
             }
         });
 }