Express+EJS项目无法访问传递的对象属性，出现TypeError错误

在Express+EJS项目中，将posts数组传递给home.ejs视图后，尝试通过<% console.log(Homeposts.title[i]) %>打印对象属性时，抛出TypeError: Cannot read properties of undefined (reading '0')错误，以下是相关代码、错误信息及问题分析与解决建议：

相关代码与错误信息 #

EJS代码 #

<% for(var i = 0; i< Homeposts.length; i++){%>
    <% console.log(Homeposts.title[i]) %>
<%}%>

错误栈信息 #

TypeError: /Users/sheshureddy/Desktop/challenge/views/home.ejs:6
4|

5| <% for(var i = 0; i< Homeposts.length; i++){%>
6| <% console.log(Homeposts.title[i]) %>
7| <%}%>
8| <%- include('partials/footer'); -%>

Cannot read properties of undefined (reading '0')
at eval ("/Users/sheshureddy/Desktop/challenge/views/home.ejs":19:35)
at home (/Users/sheshureddy/Desktop/challenge/node_modules/ejs/lib/ejs.js:703:17)
at tryHandleCache (/Users/sheshureddy/Desktop/challenge/node_modules/ejs/lib/ejs.js:274:36)
at exports.renderFile [as engine] (/Users/sheshureddy/Desktop/challenge/node_modules/ejs/lib/ejs.js:491:10)
at View.render (/Users/sheshureddy/Desktop/challenge/node_modules/express/lib/view.js:135:8)
at tryRender (/Users/sheshureddy/Desktop/challenge/node_modules/express/lib/application.js:657:10)
at Function.render (/Users/sheshureddy/Desktop/challenge/node_modules/express/lib/application.js:609:3)
at ServerResponse.render (/Users/sheshureddy/Desktop/challenge/node_modules/express/lib/response.js:1039:7)
at /Users/sheshureddy/Desktop/challenge/app.js:15:7
at Layer.handle [as handle_request] (/Users/sheshureddy/Desktop/challenge/node_modules/express/lib/router/layer.js:95:5)

app.js代码 #

const express = require("express");
const bodyParser = require("body-parser");
const ejs = require("ejs");
const posts = [];
const homeStartingContent = "Lacus vel facilisis volutpat est velit egestas dui id ornare. Semper auctor neque vitae tempus quam. Sit amet cursus sit amet dictum sit amet justo. Viverra tellus in hac habitasse. Imperdiet proin fermentum leo vel orci porta. Donec ultrices tincidunt arcu non sodales neque sodales ut. Mattis molestie a iaculis at erat pellentesque adipiscing. Magnis dis parturient montes nascetur ridiculus mus mauris vitae ultricies. Adipiscing elit ut aliquam purus sit amet luctus venenatis lectus. Ultrices vitae auctor eu augue ut lectus arcu bibendum at. Odio euismod lacinia at quis risus sed vulputate odio ut. Cursus mattis molestie a iaculis at erat pellentesque adipiscing.";
const aboutContent = "Hac habitasse platea dictumst vestibulum rhoncus est pellentesque. Dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Non diam phasellus vestibulum lorem sed. Platea dictumst quisque sagittis purus sit. Egestas sed sed risus pretium quam vulputate dignissim suspendisse. Mauris in aliquam sem fringilla. Semper risus in hendrerit gravida rutrum quisque non tellus orci. Amet massa vitae tortor condimentum lacinia quis vel eros. Enim ut tellus elementum sagittis vitae. Mauris ultrices eros in cursus turpis massa tincidunt dui.";
const contactContent = "Scelerisque eleifend donec pretium vulputate sapien. Rhoncus urna neque viverra justo nec ultrices. Arcu dui vivamus arcu felis bibendum. Consectetur adipiscing elit duis tristique. Risus viverra adipiscing at in tellus integer feugiat. Sapien nec sagittis aliquam malesuada bibendum arcu vitae. Consequat interdum varius sit amet mattis. Iaculis nunc sed augue lacus. Interdum posuere lorem ipsum dolor sit amet consectetur adipiscing elit. Pulvinar elementum integer enim neque. Ultrices gravida dictum fusce ut placerat orci nulla. Mauris in aliquam sem fringilla ut morbi tincidunt. Tortor posuere ac ut consequat semper viverra nam libero.";

const app = express();
app.set('view engine', 'ejs');
app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.static("public"));

app.get("/", function (req, res) {
  res.render('home', { text: homeStartingContent,Homeposts:posts})
  
})
app.get("/about", function (req, res) {
  res.render('about', { aboutText: aboutContent });
});
app.get("/contact", function (req, res) {
  res.render('contact', { ContactText: contactContent });
})
app.get("/compose", function (req, res) {
  res.render('compose');
});
app.post('/compose', function (req, res) {
 let  pos = {
    title: req.body.PostTitle,
    content: req.body.PostBody
  };
const post = JSON.stringify(pos);
  posts.push(post);
  res.redirect("/");
});

app.listen(3000, function () {
  console.log("Server started on port 3000");
});

问题原因分析 #

• 数据类型错误：app.js的post请求处理中，将对象pos通过JSON.stringify()转为字符串后push到posts数组，导致传递给EJS的数组元素是字符串而非对象，无法访问title属性。
• 属性访问语法错误：EJS中的访问方式错误，正确的数组元素属性访问应为Homeposts[i].title，而非Homeposts.title[i]——后者试图访问数组本身的title属性（数组无此属性，返回undefined），再读取其第0个元素，触发报错。

解决建议 #

1. 修正数据存储方式：移除JSON.stringify()，直接将对象存入posts数组：

   app.post('/compose', function (req, res) {
     let pos = {
       title: req.body.PostTitle,
       content: req.body.PostBody
     };
     posts.push(pos); // 直接存储对象，无需转为字符串
     res.redirect("/");
   });
   

2. 修正EJS属性访问语法：

   <% for(var i = 0; i< Homeposts.length; i++){%>
       <% console.log(Homeposts[i].title) %>
   <%}%>
   

内容的提问来源于stack exchange，提问作者Trex