How can i transfer the data in my array in nodes into my html table?

Question

so i have this report table on my report.hbs

<div class="card">
        <div class="card-header">
          <b>System Events</b>
        </div>
        <div class="card-body">
          <div class="container">
            <table class="table table-striped table-sm">
              <thead>
                <tr>
                  <th>Date</th>
                  <th>Type</th>
                  <th>Source</th>
                  <th>Details</th>
                </tr>
              </thead>

              <tbody id="tbl-systemEvents">
                <td>{{eventdate}}</td>
                <td>{{eventtype}}</td>
                <td>{{eventsource}}</td>
                <td>{{eventdetail}}</td>
              </tbody>
            </table>
          </div>
        </div>

and this is my node.js where the value of the array is located, this is the variable of my array:

var systemevent = ["date", "type", "source", "details"];

and this code is where the value is passed into the report.hbs :

app.get('/reports', function (req, res) {
    res.render('reports', {
        helpers: { eventdate: systemevent[0], eventtype: systemevent[1], eventsource: systemevent[2], eventdetail: systemevent[3] }
    });
});

This is how it looks like:

but what i need to do is to make the array as for loop and everytime the array changes value of its indexes then it will add in the table. help me how can i make this dynamic thank you