如何将ejs与json数据一起使用

Question

我想用json读取我的视频，然后用ejs显示它们，但我得到了一个错误：

>> 320|             <% video.videos.forEach(function(video) { %>
video is not defined

我对items.json使用了相同的方法，我没有这个问题，如果需要，我也可以上传用于显示items和items.json的代码
HTML:

<ul class="splide__list">
<% video.videos.forEach(function(video) { %>
<li class="splide__slide">
<a href="<%= video.href %>" data-lity>
<img class="thumbnail" data-splide-lazy="<%= video.src %>" alt="<%= video.alt %>">
</a>
<p><%= video.desc %></p>
</li>
<% }) %>
</ul>

节点js:

app.all('/', function (req, res) {
var items, videos;
//read shop items
fs.readFile('items.json', function (err, data) {
if (err) {
res.status(500).end();
} else {
items = JSON.parse(data);
}
});
// read videos
fs.readFile('video.json', function (err, data) {
if (err) {
res.status(500).end();
} else {
videos = JSON.parse(data);
}
});

res.render('index.ejs', {
items: items,
videos: videos
});

});

我的视频.json:

{
"videos":[
{
"href":"media/video.mp4",
"src":"thumbnails/thumbnail2.png",
"alt":"video with 1",
"desc":"desc1"
},
{
"href":"media/video3.mp4",
"src":"thumbnails/thumbnail3.png",
"alt":"video with 2",
"desc":"desc2"
}
]
}

Answer 1

问题是fs.readFile是异步的，而您在不等待它们的情况下调用render函数，因此您不能保证将内容读取到内存中。为了解决这个问题，您可以将render调用移到回调中，或者使用async/await来处理异步代码。我将向您展示async/await的示例。

app.all('/', function (req, res) {
try {
const items = await fs.promises.readFile('items.json').then(JSON.parse);
const videos = await fs.promises.readFile('videos.json').then(JSON.parse);
res.render('index.ejs', { items, videos });
} catch (e) {
res.status(500).end();
}
});

是的，您正在传递videos，而在模板中，您访问video变量，所以也将其更改为videos。