implemented fetching categories from backend

src/main/resources/static/main.js

@@ -166,7 +166,23 @@ function updateSections() {
     }
 }
 
+// fetches the further categories used in the filter function
+function fetchCategories() {
+    const fetchURL = new URL(
+        "api/v1/categories" , baseURL);
+    fetch(fetchURL)
+        .then(resp => resp.json())
+        .then((data) => {
+            console.log(data); // TODO remove
+            for (let i = 0; i < data.length; i++) {
+                console.log(data[i]); // TODO remove
+                document.getElementById("other-categories").appendChild(new Option(data[i]));
+            }
+        });
+}
+
 window.onload = function () {
+    fetchCategories();
     updateSections();
     if (searchBar.value !== "") {
         search(searchBar.value);

src/main/resources/templates/index.html

@@ -52,8 +52,7 @@
                     <option>Dataset</option>
                     <option>API</option>
                 </optgroup>
-                <optgroup label="Other categories">
-                    <option>a category</option>
+                <optgroup id="other-categories" label="Other categories">
                 </optgroup>
             </select>
             <input type="search" name="query" id="search-entry" placeholder="Search">