javascript - 我正在尝试从 ejs 模板中的 json 文件读取

Question

我已经有了 data.json 文件，我想从文件中存储的数据读取到“./views/modules/header.ejs”。理想情况下，json 文件中的数据可供我项目中的所有模块使用。

我正在使用expressJs文件，并且想要将json文件中的信息打印到我的网页上。我已经能够使用以下代码将数据加载到我的 app.js 文件中:

//import json
'use strict';
const fs = require('fs');
let jsonData = fs.readFileSync('data.json', 'utf8');
let data = JSON.parse(jsonData);
console.log(data.menu);

这是存储在菜单数组中的内容:

"menu": [
    {
        "title": "Home",
        "link": ""
    },
    {
        "title": "Location",
        "link": ""
    },
    {
        "title": "Facilities",
        "link": ""
    },
    {
        "title": "Building details",
        "link": ""
    },
    {
        "title": "Floor plans",
        "link": ""
    },
    {
        "title": "Contact",
        "link": ""
    }
],

这是我的 header.ejs 文件:

<ul class="menu-list">
    <% for(var i=0; i < data.menu.length; i++) { %>
        <li><%= data.data.menu[i].title %></li>
    <% } %>
</ul>

我相信我的 ejs 文件中缺少一条将调用数据的语句。感谢您提前提供的帮助。

这是我的index.js 文件的样子。

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;

Answer 1

该代码在路由器文件中使用

router.get('/', function(req, res, next) {
  const fs = require('fs');
  let jsonData = fs.readFileSync('data.json');
  let data = JSON.parse(jsonData);
  let dataRecord = data.data;
  let dataRecordMenu=dataRecord.menu;
res.render('index', { title: 'Bank',data:dataRecordMenu });
});

该代码在 View 文件中使用

<ul class="menu-list">
      <% for(var i=0; i < data.length; i++) { %>
          <li><%= data[i].title %></li>
      <% } %>
  </ul>