Can Not Get file EJS Under Views Directory-CodePudding

In this problem, I tried to render ejs after update the data from UI. Here is my code,

const express = require("express");
const bodyParse = require("body-parser");
const date = require(__dirname   "/date.js");

const app = express();
const port = 3000;

app.set("view engine", "ejs");
app.use(bodyParse.urlencoded({ extends: true }));
var path = require('path');

let items = ["Buy Food", "Cook Food", "Eat Food"];
let itemWorks = [];

app.get("/", function (req, res) {
  let day = date.getDay();

  res.render(path.join(__dirname   "/views/list.ejs"), { listTitle: day, listItem: items });
  items.pop;

app.post("/", function (req, res) {

  let item = req.body.foodservice;
  if(res.body.list === "work"){
    itemWorks.push(item);
    res.redirect("/work");    
  }else{
    items.push(item);
    res.redirect("/");
  }

  items.push(item);
  res.redirect("/");
});
});

Here is my list.ejs:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>To Do List</title>
  </head>
  <body>
    <h1><%=listTitle%></h1>
    <ul>
      <% for(var i = 0; i < listItem.length; i  ){ %>
      <li><%=listItem[i]%></li>
      <% } %>
    </ul>
    <form action="/" method="post">
      <input type="text" name="foodservice" placeholder="New Item" autocomplete="off"/><br /><br />
      <button type="submit" name="button" value=<%=listTitle%>> </button>
    </form>
  </body>
</html>

Here is my project's structure: BRANDNEW_PROJECT views /list.ejs app.js data.js

However, when I have executed it=> errors have been displayed as bellow

TypeError: Cannot read properties of undefined (reading 'list')
    at E:\WEB DEVELOPMENT\NodeJS\BrandNew_Project\app.js:25:15

I have tried to debug by putting log to check whether it already points to file that I want or not and the path is correct and also to tried set up file path like this:

app.set('views', __dirname   '/views');
app.set('view engine', 'ejs');

However, the issues have not been resolved.

What can be the reason here? Thanks a lot for your help.

CodePudding user response：

Live working URL : https://stackblitz.com/edit/node-dmtquz?file=index.js

Views folder is default in EJS.
Concept: when render html pages you must take care path will start for other inside views as root

when render html pages you must take care path will start for other inside views as root.
Not render views/layouts/index use layout/index because,EJS make views (or your directory) as active directory for it.
if you want to change the directory use app.set("views", path.join(path.resolve(), < dir name >)).

Structure:

views
-------- layouts
---------------- index.ejs (this file i rendered as root)
-------- partials
-----------------footer.ejs, header.ejs etc

Hope this will clear up your problem

var express = require("express");
var app = express();

// set the view engine to ejs
// app.set("views", __dirname   "/views");
app.set("view engine", "ejs");

// use res.render to load up an ejs view file

// index page
app.get("/", function (req, res) {
  res.render("layouts/index" , {
    displayTitle: "items viewer",
    item: ["item1", "item2"]
  });
});

// about page
app.get("/about", function (req, res) {
  res.render("layouts/about");
});

app.listen(8080);
console.log("Server is listening on port 8080");

<!-- root dir, views/layout/list.ejs  -->
<!DOCTYPE html>
<html lang="en">
  <body>
    <%= displayTitle%>
    <hr />
    <% for (let i of items) { %>
    <br />
    <%= i %> <% } %>
  </body>
</html>

CodePudding user response：

I think you need to use path.resolve instead of path.join like this:

res.render(path.resolve(__dirname   "/views/list.ejs"), { listTitle: day, listItem: items });

You might also need to update your import of the date object at the top to use path.resolve like this:

const date = require(path.resolve(__dirname   "/date.js"));

In my code I use path.resolve anytime I use __dirname