将数据从 data.json 文件解析为 index.ejs (expressJS)

Question

I'm trying to parse data from my data.json file, I want to store all the data for the site in this json file and parse the data to my index.ejs file. Below is a snippet of my index.ejs file, my app.js (file used for set up) and my data.json file.

HTML Snippet(index.ejs)

<ul class="menu-list">
    <li><%= data.menu.title %></li>
</ul>

Json file (data.json)

{
 "data": {
    "menu": [
        {
            "title": "Home",
            "link": ""
        },
        {
            "title": "Contact",
            "link": ""
        }
     ]
  }
}

Set up file (app.js)

  var createError = require('http-errors');
  var express = require('express');
  var path = require('path');
  var cookieParser = require('cookie-parser');
  var logger = require('morgan');
  var sassMiddleware = require('node-sass-middleware');

  var indexRouter = require('./routes/index');
  var usersRouter = require('./routes/users');

  var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());

// compiling sass files
app.use(sassMiddleware({
 src: path.join(__dirname, 'public/stylesheets/scss'),
 dest: path.join(__dirname, 'public/stylesheets'),
 debug: true,
 outputStyle: 'compressed',
 prefix: '/stylesheets'
}));

app.use('/public', express.static(path.join(__dirname, 'public')));

app.use('/', indexRouter);
app.use('/users', usersRouter);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
 next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
 // set locals, only providing error in development
 res.locals.message = err.message;
 res.locals.error = req.app.get('env') === 'development' ? err : {};

 // render the error page
 res.status(err.status || 500);
 res.render('error');
});


module.exports = app;

Forgive my indentation- putting it in was weird. All files are on the same level.

Answer 1

For your example replace <li><%= data.menu.title %></li> with <li><%= data.menu[0].title %></li> because menu is array not single data Sample Data

var data = 
     {"data": {
        "menu": [
            {
                "title": "Home",
                "link": ""
            },
            {
                "title": "Contact",
                "link": ""
            }
         ]
      } };

Ejs Code

 <ul class="menu-list">



<% for(var i=0; i < data.data.menu.length; i++) { %>

    <li><%= data.data.menu[i].title %></li>

<% } %>

  </ul>