如何在Express项目中让所有EJS模块共享JSON文件数据？

你目前遇到的核心问题有两个：一是没把JSON数据全局传递给所有EJS视图，二是header.ejs里的变量引用路径错误。下面一步步帮你解决：

1. 把JSON数据挂载为全局视图变量 #

你已经在app.js里读取了JSON数据，但还需要将其挂载到Express的app.locals对象上——这个对象里的属性会自动成为所有EJS模板的全局变量，不用在每个路由里重复传递。

修改你的app.js代码：

'use strict';
const express = require('express');
const app = express();
// 可以用更简洁的方式加载JSON，require会自动解析JSON格式
const siteData = require('./data.json');

// 将数据挂载到app.locals，让所有模板都能访问
app.locals.siteData = siteData;

// 后续的中间件、路由配置...

2. 修正header.ejs里的变量引用 #

你之前的模板里写了data.data.menu[i].title，这是错误的路径。现在我们把数据挂载到了siteData全局变量下，直接引用它即可：

修改后的header.ejs：

<ul class="menu-list">
  <% siteData.menu.forEach(item => { %>
  <li><a href="<%= item.link %>"><%= item.title %></a></li>
  <% }) %>
</ul>

如果习惯用for循环也可以：

<ul class="menu-list">
  <% for(let i = 0; i < siteData.menu.length; i++) { %>
  <li><a href="<%= siteData.menu[i].link %>"><%= siteData.menu[i].title %></a></li>
  <% } %>
</ul>

3. 路由代码无需额外修改（可选补充） #

你的index.js路由代码保持原样即可，因为全局变量siteData会自动注入到模板上下文里。如果需要传递页面专属数据（比如title），直接正常传递就行，两者互不影响：

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Bank' });
});

module.exports = router;

额外小提示 #

• 用require('./data.json')加载JSON比fs.readFileSync更简洁，而且是同步加载，适合启动时读取配置类数据；
• 确保data.json的路径正确，如果它不在app.js同级目录，要写对相对路径（比如./config/data.json）。

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