Array Database

Using an Array to get Database

Arrays are used in almost every database in order to store and retrieve information by the user whenever needed. If we have an array in our database, we can use our controllers to display our target content on the browser.

It is okay to mix texts and variables during th rendering process.

// example array
let videos = [
  {
    title: "First Video",
    rating: 5,
    comments: 2,
    createdAt: "2 minutes ago",
    views: 59,
    id: 1,
  },
  {
    title: "Second Video",
    rating: 5,
    comments: 2,
    createdAt: "2 minutes ago",
    views: 59,
    id: 2,
  },
  {
    title: "Third Video",
    rating: 5,
    comments: 2,
    createdAt: "2 minutes ago",
    views: 59,
    id: 3,
  },
];

// controller
export const watch = (req, res) => {
  const { id } = req.params;
  const video = videos[id - 1];
  return res.render("watch", { pageTitle: `Watching ${video.title}`, video });
};

To clearly display our content to the browser, we modify our pug.js template files through the selected variable names.

When writing the URL of an anchor element, be sure to specify the exact path of where the content is located at. For example, if we include a "/", we are basically starting all the way back from the home address. If we do not include a "/" and just start with a new URL keyword (just like on the example below), we are continuing from the address on the controller.

// template
block content
  h3 #{video.views} #{video.views === 1 ? "view" : "views"}
  a(href=`${video.id}/edit`) Edit Video →

GET and POST

The GET method is used to request a previously existing data from a server for the user to use. The POST method is used to request data that we want to submit and add to the database which can potentially be displayed on the browser.

If we are using both GET and POST at the same time, we can combine the two methods by using the route funciton and chain them together.

videoRouter.get("/:id(\\d+)", watch);
videoRouter.post("/:id(\\d+)", watch);
videoRouter.route("/:id(\\d+)/edit").get(getEdit).post(postEdit);

Additionally, we need to create each individual GET and POST functions for the request to work. Once the GET and POST methods are active, the controllers process all the code that will be displayed on the browser(both on the URL and the body).

export const getEdit = (req, res) => {
  const { id } = req.params;
  const video = videos[id - 1];
  return res.render("edit", { pageTitle: `Editing: ${video.title}`, video });
};
export const postEdit = (req, res) => {
  const { id } = req.params;
  const { title } = req.body;
  videos[id - 1].title = title;
  return res.redirect(`/videos/${id}`);
};

When trying to use a POST method in a form, express cannot detect the form element in default. For this, we add a special middleware called express.urlencoded() that can help express detect the form element.

app.use(express.urlencoded({ extended: true }));