Can I update mongoose model that is once already rendered by using fetch?

Question

I'm creating a web s like youtube using express. and I'm using mongoose for db and pug(jade) template for view. If I get to the home router("/"), the view file-"Home"- and db array-videos- are rendered. The home controller looks like this,

      import Video from "../models/Video.js";

      export const home = async (req, res) => {
      let videos = [];
      videos = await Video.find({ hashtags: "#rap" }).populate("video");
      return res.render("home", { pageTitle: "Home", videos });
    };

At this same route, I want to filter my video db and re-render the filtered videos by using fetch. then send those videos to the pug template.

So I created a new function called 'handleVideoFilter()' in my 'main.js'.

const categoryBtn = document.querySelectorAll("#category_bar_chips a");

export const handleVideoFilter = async (event) => {
  event.preventDefault();
  const clickedCategory = event.target;
  const id = clickedCategory.dataset.id;
  fetch(`/api/videos/filtered/${id}`, { method: "GET" });
};

Array.from(categoryBtn).forEach((li) =>
  li.addEventListener("click", handleVideoFilter)
);

and for this API router and controller are like this.

//router     
apiRouter.get("/videos/filtered/:id", getFilteredVideos);

//the controller
 export const getFilteredVideos = async (req, res) => {
  const { id } = req.params;
  const videos = await Video.find({ hashtags: `#${id}` });
  return res.render({ videos });
};

But an TypeError occured and I don't see why. The fetch request and getting filltered videos array were successful, I guess there's something wrong with 'return res.render' code.

(node:4172) UnhandledPromiseRejectionWarning: TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received an instance of Object

I'm filltering videos using 'data-id' attribution in the nav, and using mixin to render Video model. the "home" pug file looks like this

include mixins/video

            ul#category_bar_chips
              a(href="/")
                li all
              a
                li(data-id="music") music
              a
                li(data-id="rap") rap
              a
                li(data-id="cooking") cooking
              a
                li(data-id="pet") pet
              a
                li(data-id="recent") recent
    
            .contents
              .video-wrap
                each video in videos
                  +video(video)
                else
                  h1 No video found :(

here's the video mixin file

here's the Video model schema

//video schema

const videoSchema = new mongoose.Schema({
  title: { type: String, required: true, trim: true, maxLength: 50 },
  fileUrl: { type: String, required: true },
  thumbUrl: { type: String, required: true },
  description: { type: String, required: true, trim: true, minLength: 2 },
  createdAt: { type: Date, required: true, default: Date.now },
  hashtags: [{ type: String }],
  meta: {
    views: { type: Number, default: 0, required: true },
    rating: { type: Number, default: 0, required: true },
  },
  comments: [
    { type: mongoose.Schema.ObjectId, required: true, ref: "Comment" },
  ],
  owner: { type: mongoose.Schema.Types.ObjectId, required: true, ref: "User" },
});

Sorry If this question was too ambiguous or not professional since I'm new to this whole programming world.

But I'd really like to figure this out. And I don't have a clue what kind of languege or framework to solve this error.

Your answer would be very helpful, thanks a lot for reading.

Answer 1

Is this where the error is getting thrown?

return res.render({ videos });

There is no path specified for the the render method. It should look something like this:

return res.render('videos', { videos });

... where 'videos' is the view you want rendered and {videos} are the values you want to pass back to the view.