如何从Node.js传递数组并在.ejs文件中正确渲染数组元素

你遇到的EJS标签不解析、循环结构不生成、仅输出原始字符串的问题，按以下优先级排查修复即可：

• 模板文件存放位置/后缀错误：EJS模板必须放在你配置的./views目录下，且文件后缀必须是.ejs（比如index.ejs）。如果你把模板文件存在了public静态资源目录，或者把后缀存成了.html，Express会直接把文件当静态文本返回，不会调用EJS引擎解析<% %>标签，自然不会生成你要的循环结构。
• 重复ID问题：你现在循环里给每个生成的div都加了id="imgBox"，HTML规范要求同一个页面ID唯一，多个元素重复ID会导致后续样式、JS操作失效，建议替换为class="imgBox"。
• 传参对应关系没问题：你服务端res.render里传的键名是title，模板里用title取数组是正确的，不需要在模板里找服务端的output变量。

Node服务端代码 #

你原有逻辑基本正确，仅简化了数组提取的写法，修正了控制台打印的端口拼接bug：

const express = require('express');
const ejs = require('ejs');
const bodyParser = require('body-parser');
const sqlite3 = require('sqlite3');
const sqlite = require('sqlite');

const app = express();
app.set('view engine','ejs');
app.set('views','./views');
app.use(bodyParser.urlencoded({extended:false}));
app.use(bodyParser.json());
app.use(express.static(__dirname+'/public'));

async function getDBConnection(){
    const db = await sqlite.open({
        filename : 'product.db',
        driver: sqlite3.Database
    });
    return db;
}

app.get('/', async function(req,res){
    let db = await getDBConnection();
    let rows = await db.all('select * from items');
    await db.close();   
    
    // 替换原有for循环，效果一致写法更简洁
    const output = rows.map(item => item.product_title);
    
    res.render('index',{
        test: "测试文本",
        title: output
    });
});

const port = 3000;
app.listen(port,function(){
    console.log(`server on! http://localhost:${port}`);
});

EJS模板代码（views/index.ejs） #

仅把重复ID替换为类名，原有循环逻辑无需修改：

<div id="itemBox">
    <% for(let i=0;i<title.length;i++){ %>
        <div class="imgBox"><%= title[i] %></div>
        <br>
    <% } %>    
</div>

1. 确认views目录下存在index.ejs文件，public目录下没有同名的index.html/index.ejs文件
2. 重启Node服务
3. 访问http://localhost:3000，打开浏览器开发者工具的元素检查面板，就能看到和数组长度一致的imgBox元素已经正常渲染，不会再出现原始EJS标签文本。

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