Add alert box which does another request to HTML

MoviesClient/web/index.html

@@ -9,8 +9,7 @@
 
         const MOVIES_RESOURCE_URL = "http://localhost:8080/movieservice/resources/movie";
 
-        let loadNews = function () {
+        const options = {
-            let options = {
             mode: "cors",
             headers: {
                 "Accept": "application/json",
@@ -18,19 +17,31 @@
             }
         };
 
+        let loadNews = function () {
             // Studios: ID dranhängen -> 2. Aufruf -> Alert dranhängen
             fetch(MOVIES_RESOURCE_URL, options)
                 .then(response => response.json())
                 .then(function (moviesList) {
                     let html = moviesList.map(movie =>
                         `<h2>${movie.title}</h2>
-                         <p>${movie.description}</p>`)
+                         <p>${movie.description}</p>
+                         <button onclick="displayDetails(${movie.id})">Get more info</button>`)
                         .join("");
 
                     document.getElementById("content").innerHTML = html;
                 })
                 .catch(error => document.getElementById("content").innerHTML = `Error: ${error}`);
         };
+
+        let displayDetails = function (id) {
+            fetch(MOVIES_RESOURCE_URL + "/" + id, options) // TODO: Ugly URL building
+                .then(response => response.json())
+                .then(function (movie) {
+                    alert(movie.length)
+                })
+                .catch(error => document.getElementById("content").innerHTML = `Error: ${error}`);
+        };
+
         document.addEventListener("DOMContentLoaded", loadNews);
     </script>
 </head>