thx hamza

backend/routes/genres.js

+const express = require("express");
+const GenreModel = require("../models/genre");
+const router = express.Router();
+
+module.exports = router;
+
+// router.get("/popular/:number", async function (req, res) {
+//   try {
+//     const filmNumber = await req.params["number"];
+//     const getGenres = await GenreModel.find({})
+//       .sort({ popularity: "desc" })
+//       .limit(filmNumber);
+//     res.send(getGenres);
+//   } catch (error) {
+//     console.log(error);
+//   }
+// });
+
+router.get("/genre/id/:id", async function (req, res) {
+  try {
+    const genreId = await req.params["id"];
+    const getGenres = await GenreModel.findOne({ id: genreId });
+    res.send(getGenres.name);
+  } catch (error) {
+    console.log(error);
+  }
+});
+
+// router.post("/new", async function (req, res) {
+//   try {
+//     const newGenre = new GenreModel({
+//       // Genre attributes
+//       publisher: req.body.publisher,
+//       title: req.body.title,
+//       date: req.body.date,
+//       imageURL: req.body.imageURL,
+//       viewers: req.body.viewers,
+//     });
+
+//     // Create a new genre instance
+//     const createdGenre = await newGenre.save();
+
+//     // What to do after genre has been saved !
+//     console.log("Genre Saved");
+//     res.send(createdGenre);
+//   } catch (error) {
+//     console.log(error);
+//   }
+// });
+
+// router.put("/id/:id", async function (req, res) {
+//   try {
+//     const genreId = await req.params["id"];
+//     await GenreModel.findByIdAndUpdate(genreId, {
+//       publisher: req.body.publisher,
+//       title: req.body.title,
+//       date: req.body.date,
+//       imageURL: req.body.imageURL,
+//       viewers: req.body.viewers,
+//     });
+//     res.send("Done");
+//   } catch (error) {
+//     console.log(error);
+//     res.send("Invalid Id");
+//   }
+// });

backend/server.js

@@ -5,6 +5,7 @@ const mongoose = require("mongoose");
 const indexRouter = require("./routes/index");
 const usersRouter = require("./routes/users");
 const moviesRouter = require("./routes/movies");
+const genresRouter = require("./routes/genres");
 const routeNotFoundJsonHandler = require("./services/routeNotFoundJsonHandler");
 const jsonErrorHandler = require("./services/jsonErrorHandler");
 
@@ -22,6 +23,7 @@ app.use("/", indexRouter);
 app.use("/users", usersRouter);
 
 app.use("/movies", moviesRouter);
+app.use("/genres", genresRouter);
 
 // Register 404 middleware and error handler
 app.use(routeNotFoundJsonHandler); // this middleware must be registered after all routes to handle 404 correctly

frontend/src/components/MovieInfos.vue

@@ -2,13 +2,21 @@
   <div class="parent">
     <h1>{{ movieTitle }}</h1>
     <h4>{{ movieVoteAverage }}</h4>
-    <h4>{{ movieGenres }}</h4>
+    <h4>{{ genreArray }}</h4>
     <h4>{{ movieOverview }} {{ movieOverview }} {{ movieOverview }}</h4>
   </div>
 </template>
 
 <script>
+import axios from "axios";
+const backendURL = process.env.VUE_APP_BACKEND_BASE_URL;
+
 export default {
+  data: function () {
+    return {
+      genreArray: [],
+    };
+  },
   props: {
     movieTitle: String,
     movieDate: String,
@@ -16,6 +24,43 @@ export default {
     movieOverview: String,
     movieVoteAverage: Number,
   },
+  methods: {
+    developGenre: async function (genreId) {
+      try {
+        console.log("g");
+        const response = await axios
+          .get(backendURL + "/genres/genre/id/" + genreId)
+          .then();
+        console.log("oi");
+        console.log(response.data);
+        return response.data;
+      } catch (error) {
+        console.log(error);
+      }
+    },
+    developGenres: function (genreIdArray) {
+      try {
+        var res = [];
+        console.log("f");
+        console.log(genreIdArray);
+        // console.log([12, 16].map(this.developGenre));
+        const genreArray = genreIdArray.map(this.developGenre);
+        return Promise.all(genreArray);
+      } catch (error) {
+        console.log("e");
+        console.log(error);
+      }
+    },
+  },
+  created() {
+    console.log("a");
+    console.log();
+
+    console.log("b");
+    this.genreArray = this.developGenres([12, 16]).then((results) => {
+      this.genreArray = results;
+    });
+  },
 };
 </script>