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

Question

我想使用 json 来读取我的视频，然后使用 ejs 显示它们，但我收到错误：

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

我对 items.json 使用了相同的方法，我没有遇到这个问题，如果需要，我也可以上传用于显示项目的代码和 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
       });
    
});

我的 video.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。