node js 用 ejs forEach 对象表示并放入 table

Question

你好，我今天才开始学习 node js，我正在尝试 forEach 一个对象并放入 table。

在我的路由器中：

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 });
});

在我的 ejs 文件中我尝试过：

<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>

以上尝试的输出： image for output above

我也试过：

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

以上尝试的输出： image for output above

我想要达到的目标： What i would like to achieve image

我只是想不出如何像上图那样得到它，或者是否可以做到。

Answer 1

您必须为每一行添加一个额外的循环。如果您确定所有数组属性的长度都相同，则可以根据数组长度（例如 ProjectileVelocity 数组长度）使用 for 或 forEach 循环。

    <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>

node js 用 ejs forEach 对象表示并放入 table

node js express with ejs forEach object and put into table

javascript

ejs

node.js

express