javascript - 我应该如何使用 ejs 垂直渲染表格？

Question

我有一个如下数组：

quotation: [{
              "dimension" : 0,
              "currency": "RMB",
              "quantity": "100",
              "price": "3",
              "factory": "rx"},
            {
              "dimension" : 0,
              "currency": "RMB",
              "quantity": "200",
              "price": "4",
              "factory": "rx"},
           {
              "dimension" : 1,
              "currency": "RMB",
              "quantity": "100",
              "price": "3",
              "factory": "rx"},
           {
              "dimension" : 1,
              "currency": "RMB",
              "quantity": "200",
              "price": "5",
              "factory": "rx"},
            {
              "dimension" : 0,
              "currency": "RMB",
              "quantity": "100",
              "price": "1.2",
              "factory": "hsf"},
            {
              "dimension" : 0,
              "currency": "RMB",
              "quantity": "200",
              "price": "2.4",
              "factory": "hsf"},
           {
              "dimension" : 1,
              "currency": "RMB",
              "quantity": "100",
              "price": "3",
              "factory": "hsf"},
           {
              "dimension" : 1,
              "currency": "RMB",
              "quantity": "200",
              "price": "4.5",
              "factory": "hsf"}]

我应该如何使用ejs变成下表？

<table>
   <tr>
      <th>Dimension</th><th>Quantity</th><th>Factory: rx</th><th>Factory: hsf</th>
   </tr>
   <tr>
      <td>0</td><td>100</td><td>3</td><td>1.2</td>
   </tr>
   <tr>
      <td>0</td><td>200</td><td>4</td><td>2.4</td>
   </tr>
   <tr>
      <td>1</td><td>100</td><td>3</td><td>3</td>
   </tr>
   <tr>
      <td>1</td><td>200</td><td>5</td><td>4.5</td>
   </tr>
</table>

我必须确保价格来自正确的工厂。如果 html 允许我逐列定义表格，我认为这个问题很容易。但是 html table 只允许我按行执行。

非常感谢您的帮助。

Answer 1

<table>
   <tr>
      <th>Dimension</th><th>Quantity</th><th>Factory: rx</th>
   </tr>

   <% for (var i = 0; i < quotation.length; /* I save the data in a variable 'quotation', I don't know how you named your variable  */  i++) { %>
    <tr>
      <td><%= quotation[i].dimension %></td>
      <td><%= quotation[i].quantity %></td>
      <td><%= quotation[i].factory %></td>
    </tr>    
   <% } %>
</table>

Answer 2

// Making a div tag and fetching its value to make table

<div id="tableDiv" style="margin-top: 40px">

//创建表并从JSON对象中获取数据。

var table_body = '<table border="1" id="example"><thead><tr><th> Dimension </th><th> Quantity </th><th>Factory</th></tr></thead><tbody>';

                for(var i =0; i<quotation.length;i++){
                    table_body+='<tr>';

                    table_body +='<td>';
                    table_body +=`quotation[i].dimension`;
                    table_body +='</td>';

                    table_body +='<td>';
                    table_body +=quotation[i].Quantity;
                    table_body +='</td>';

                    table_body +='<td>';
                    table_body +=quotation[i].Quantity;
                    table_body +='</td>';                

                    table_body+='</tr>';

                }

                table_body+='</tbody></table>';
               $('#tableDiv').html(table_body);//display data of the table