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

Question

I have the following njk code:

{% 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 %}

I want to put the values in this JSON file in the table in the HTML part of my njk code.

[
    {
    "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"
    }
]

However, when I run the code, I look in the console of my site in the localhost, and find out that the {{activities}} part in the code was replaced by this line:

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

I have double curly brackets around activities since I have the following JS file to connect to a host and a port to put it in a browser 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}`);
});

I want to know if there is any way to fix it. I am a beginner in handling JSON files, so I would appreciate it if I would have a few tips on how to add JSON values to an HTML table.

Answer 1

Try using the nunjucks for loops. This worked for me

This is the code

{% 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 %}