如何通过 nunjucks 将 JSON tables 放入 HTML table 中？

Question

我有以下 njk 代码：

{% extends "clubBase.njk" %}

{% block metaStuff %}
        
{% endblock %}
    
{% block main %}
  <main style="background-color:#dcebf5; margin:25px;padding:50px;">
    <header>
        <h1 style ="font-family:verdana;"align = "center";>Club Activities</h1>
        <h2 align = "right">Activity Types</h2>
            <ul>
                <li>activity1</li>
                <li>activity2</li>
                <li>activity3</li>
            </ul>
        <h2 align="right">Activity Schedule</h2>
        <p>This is the schedule of the activities</p>
<table align = "center">
  <caption><b>Schedule</b></caption>
  <thead>
  <tr>
    <th>Name</th>
    <th>Dates</th>
  </tr>
  </thead>
  <tbody id="ActTable">
  </tbody>
</table>
    </header>
    </main>
    <footer align="center">
        <p>&copy; 2021, [RETACTED], SAGTRHYDTJHSYHSRTGAERFefef
        <a href="mailto:[RETACTED]@gmail.com">[RETACTED]@gmail.com</a></p>
    </footer>
        <script>         
        let tbody = document.getElementById("ActTable"); 
        {{activities}}.forEach(function(event) { 
         let tr = document.createElement("tr"); 
         let content = `<td>event.name</td><td>event.dates</td>`; 
         tr.innerHTML = content; 
         tbody.appendChild(tr); 
        }) 
        </script>
{% endblock %}

我想将此 JSON 文件中的值放入我的 njk 代码 HTML 部分的 table 中。

[
    {
    "name": "event 1",
    "dates": "September 11, March 13, April 3, August 10, June 30, October 4, November 5"
    },
    {
    "name": "event 2",
    "dates": "May 7, June 2, July 20, August 4, September 28"
    },
    {
    "name": "event 3",
    "dates": "June 4, September 30"
    }
]

但是，当我运行代码时，我在本地主机中查看我网站的控制台，发现代码中的 {{activities}} 部分被这一行所取代：

[object Object],[object Object],[object Object]

我在活动周围用双花括号括起来，因为我有以下 JS 文件连接到主机和端口以将其放入浏览器 window:

const express = require('express');
const app = express();
const nunjucks = require('nunjucks');
let activities = require('./eventData.json');
//console.log(activities[1].name); prints event 2
nunjucks.configure('views', {
    autoescape: true,
    express: app
});
const port = 3012; // !!! WARNING YOU MUST CONFIGURE THIS CORRECTLY WHEN WE DEPLOY !!!
app.use(express.static('public'));
let count = 0; // Visit count
let startDate = new Date(); // Server start Date time
let yourName = "[RETACTED]";
let netId = "[RETACTED]";

app.get('/', function (req, res) {
    count++;
    //res.send(`Hi from ${yourName}, NetId: ${netId}, Visited: ${count} times.`);
    res.render('index.njk');
});

app.get('/login', function(req, res){
    let curDate = new Date();
     //res.send(`Current Date/Time: ${curDate.toLocaleString()}, Server Up Since: ${startDate.toLocaleString()}`);
    res.render('login.njk');
})

app.get('/membership', function(req, res){
    let curDate = new Date();
     //res.send(`Current Date/Time: ${curDate.toLocaleString()}, Server Up Since: ${startDate.toLocaleString()}`);
    res.render('membership.njk');
})

app.get('/activities', function(req, res){
    let curDate = new Date();
     //res.send(`Current Date/Time: ${curDate.toLocaleString()}, Server Up Since: ${startDate.toLocaleString()}`);
    res.render('activities.njk', {activities: activities});
})


host = 'localhost';

app.listen(port, host, function () {
console.log(`deployTest.js app listening on IPv4: ${host}:${port}`);
});

我想知道有没有办法解决。我是处理 JSON 文件的初学者，所以如果我能提供一些关于如何将 JSON 值添加到 HTML table.[= 的提示，我将不胜感激。 17=]

Answer 1

尝试使用 nunjucks for 循环。这对我有用

这是代码

{% block main %}
    //other code
    <table>
        <thead>
            <tr>
                <th>Name</th>
                <th>Date</th>
            </tr>
        </thead>
        <tbody>
            {% for event in activities %}
                <tr>
                    <td>{{event.name}}</td>
                    <td>{{event.dates}}</td>
                </tr>
            {% endfor %}
        </tbody>
    </table>
{% endblock %}

如何通过 nunjucks 将 JSON tables 放入 HTML table 中？

How do I put JSON tables in a HTML table via nunjucks?

html

json

nunjucks