向EJS传入JSON对象后HTML表格渲染异常 数据堆在一行带逗号

• 渲染逻辑匹配错误：只要在EJS模板中直接输出JS数组，就会触发数组的默认toString行为，将所有数组元素用逗号拼接成单个字符串，不会自动拆分到多行或多单元格。结合当前代码写法，出现带逗号的挤堆内容只有两种可能：要么receta.ingredientes本身是数组结构，被当成单个对象读取后直接输出数组内容；要么是ingredientes下的nombre、cantidad字段本身是数组结构，直接输出时触发字符串拼接。
• HTML表格结构不规范：代码中存在标签嵌套错位、未闭合的问题：比如多嵌套了一层tbody、表头tr标签未闭合就直接开启新行、tr的闭合标签放错层级。浏览器对不规范HTML会做容错修正，这个过程很容易打乱原本的表格结构，让内容排布进一步错位。

1. 先核对本地data.json中ingredientes字段的实际结构，根据对应结构调整模板遍历逻辑：
   • 结构一：ingredientes是存储单个食材对象的数组，每个元素同时包含食材名、对应数量

     "ingredientes": [
       {"nombre": "番茄", "cantidad": "2个"},
       {"nombre": "鸡蛋", "cantidad": "3个"}
     ]
     

   • 结构二：ingredientes下包含两个平行数组，分别存储所有食材名、所有对应数量

     "ingredientes": {
       "nombre": ["番茄", "鸡蛋", "食盐"],
       "cantidad": ["2个", "3个", "5g"]
     }
     

2. 按照对应结构，在表格tbody区域遍历食材列表，为每个食材单独生成一行表格内容，不要直接在单元格内输出完整数组。
3. 修正HTML标签的闭合与嵌套结构：去掉多余的嵌套tbody，补全所有tr、td的闭合标签，保证表格层级符合HTML规范。

适配结构一（ingredientes为对象数组） #

<table style="width:100% ; border:1px solid black ; border-collapse: collapse;padding: 15px" >
  <tbody>
    <!-- 表头行 -->
    <tr style="height: 18px; border: 1px solid black; border-collapse: collapse; padding: 15px">
      <td style="width: 50%; height: 18px; text-align: justify; border: 1px solid black; border-collapse: collapse; padding: 15px">
        <strong>Ingrediente</strong>
      </td>
      <td style="width: 50%; height: 18px; text-align: justify; border: 1px solid black">
        <strong>Cantidad</strong>
      </td>
    </tr>
    <!-- 遍历单个食材对象生成行 -->
    <% receta.ingredientes.forEach(function(ingrediente) { %>
    <tr style="height: 18px; border: 1px solid black; border-collapse: collapse; padding: 15px">
      <td style="width: 50%; height: 18px; text-align: justify; border: 1px solid black; border-collapse: collapse; padding: 15px">
        <%= ingrediente.nombre %>
      </td>
      <td style="width: 50%; height: 18px; text-align: justify; border: 1px solid black; border-collapse: collapse; padding: 15px">
        <%= ingrediente.cantidad %>
      </td>
    </tr>
    <% }); %>
  </tbody>
</table>

适配结构二（nombre、cantidad为平行数组） #

<table style="width:100% ; border:1px solid black ; border-collapse: collapse;padding: 15px" >
  <tbody>
    <!-- 表头行 -->
    <tr style="height: 18px; border: 1px solid black; border-collapse: collapse; padding: 15px">
      <td style="width: 50%; height: 18px; text-align: justify; border: 1px solid black; border-collapse: collapse; padding: 15px">
        <strong>Ingrediente</strong>
      </td>
      <td style="width: 50%; height: 18px; text-align: justify; border: 1px solid black">
        <strong>Cantidad</strong>
      </td>
    </tr>
    <!-- 按索引同步遍历两个平行数组生成行 -->
    <% for(let i = 0; i < receta.ingredientes.nombre.length; i++) { %>
    <tr style="height: 18px; border: 1px solid black; border-collapse: collapse; padding: 15px">
      <td style="width: 50%; height: 18px; text-align: justify; border: 1px solid black; border-collapse: collapse; padding: 15px">
        <%= receta.ingredientes.nombre[i] %>
      </td>
      <td style="width: 50%; height: 18px; text-align: justify; border: 1px solid black; border-collapse: collapse; padding: 15px">
        <%= receta.ingredientes.cantidad[i] %>
      </td>
    </tr>
    <% } %>
  </tbody>
</table>

• 渲染准备步骤的textarea标签时，不要在标签内部留多余的换行、缩进空格，否则这些空白会被直接渲染到文本框内，造成排版混乱
• 核对两个平行数组的长度，确保食材名和数量的顺序一一对应，避免出现张冠李戴的错配
• 编写HTML标签时养成即时闭合的习惯，浏览器的自动容错渲染很可能打乱原本设计的单元格结构，导致内容排布错位

内容的提问来源于stack exchange，提问作者Ulrich Matthew Vidangos Philip