[Fixed] node js express with ejs forEach object and put into table

Issue

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.

Solution

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 (e.g. 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>