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

时间:2019-12-09 13:13:52

标签: javascript arrays node.js json express

我有我的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;

1 个答案:

答案 0 :(得分: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 });
});

该代码在视图文件中使用

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