node js express with ejs forEach object and put into table

Question

Hello i have just started to learn node js today and i'm trying to forEach an object and place into a table.

In my router:

var obj = JSON.parse(`[{
    "Name": "ArrowTower",
    "Class": "ArrowTower",
    "GoldCosts": [0, 100, 200, 600, 1200, 2000, 8000, 35000],
    "WoodCosts": [5, 25, 30, 40, 50, 70, 300, 800],
    "StoneCosts": [5, 20, 30, 40, 60, 80, 300, 800],
    "TokenCosts": [0, 0, 0, 0, 0, 0, 0, 0],
    "TowerRadius": [600, 650, 700, 750, 800, 850, 900, 1000],
    "MsBetweenFires": [400, 333, 285, 250, 250, 250, 250, 250],
    "Height": 95.99,
    "Width": 95.99,
    "Health": [150, 200, 400, 800, 1200, 1600, 2200, 3600],
    "MsBeforeRegen": [10000, 10000, 10000, 10000, 10000, 10000, 10000, 10000],
    "HealthRegenPerSecond": [2, 5, 10, 20, 40, 80, 110, 150],
    "DamageToZombies": [20, 40, 70, 120, 180, 250, 400, 500],
    "DamageToPlayers": [5, 5, 5, 5, 5, 5, 6, 6],
    "DamageToPets": [5, 5, 5, 5, 5, 5, 6, 6],
    "DamageToNeutrals": [250, 350, 450, 550, 650, 750, 850, 1000],
    "ProjectileLifetime": [1300, 1300, 1300, 1300, 1300, 1300, 1300, 1300],
    "ProjectileVelocity": [60, 65, 70, 70, 75, 80, 120, 140],
    "ProjectileName": "ArrowProjectile",
    "ProjectileAoe": [false, false, false, false, false, false, false, false],
    "ProjectileCollisionRadius": [10, 10, 10, 10, 10, 10, 10, 10]
}]`)

router.get('/info', (req, res) => {
  res.render("info", { obj: obj });
});

In my ejs file i have tried:

<table id="table">
  <tr>
    <td>Tier</td>
    <td>Velocity</td>
    <td>Reload</td>
    <td>Damage</td>
    <td>Health regen/s</td>
  </tr>
  
  <% Object.values(obj).forEach(function(tower){%>
  <tr>
    <td>Tier </td>
    <td><%= tower.ProjectileVelocity %></td>
    <td><%= tower.MsBetweenFires %></td>
    <td><%= tower.DamageToZombies %></td>
    <td><%= tower.HealthRegenPerSecond %></td>
  </tr>
  <%})%>
</table>

The output for above try: image for output above

I have also tried:

 <% Object.values(obj).forEach(function(tower){%>
  <tr>
    <td>Tier </td>
    <td><%= tower['ProjectileVelocity'][0] %></td>
    <td><%= tower['MsBetweenFires'][0] %></td>
    <td><%= tower['DamageToZombies'][0] %></td>
    <td><%= tower['HealthRegenPerSecond'][0] %></td>
  </tr>
 <%})%>

The output for above try: image for output above

What i'm trying to achieve: What i would like to achieve image

I just can't seem to work out how to get it like the image above or if it can even be done.

Answer 1

You have to add an extra loop for each row. If you are sure that all array properties have the same length, you can use a for or a forEach loop according to an array length (eg ProjectileVelocity array length).

    <table id="table">
        <tr>
            <td>Tier</td>
            <td>Velocity</td>
            <td>Reload</td>
            <td>Damage</td>
            <td>Health regen/s</td>
        </tr>
                                
        <% Object.values(obj).forEach(function(tower){%>
            <% for (let i = 0; i < tower.ProjectileVelocity.length; i++) { %>
                <tr>
                    <td>Tier </td>
                    <td><%= tower.ProjectileVelocity[i] %></td>
                    <td><%= tower.MsBetweenFires[i] %>ms</td>
                    <td><%= tower.DamageToZombies[i] %></td>
                    <td><%= tower.HealthRegenPerSecond[i] %></td>
                </tr>
            <%  } %>
        <%})%>
   </table>