如何通过函数为API数据生成的HTML表格添加序号列

问题背景 #

现有通过Fetch API获取的数据结构如下：

const info={
    "suggesstion":0,
    "idea":{
       "prod": [
             {
               "group": {
                        "subj": "English",
                        "class": "one",
                        "section": "1A"
                    },
             },
             {
               "group": {
                        "subj": "Physics",
                        "class": "nine",
                        "section": "2A"                      
                    },
             },
             {
               "group": {
                        "subj": "Math",
                        "class": "Ten",
                        "section": "3A"
                    },
             }
          ]
       }
    }

当前使用的表格内容生成函数无法生成序号列，且存在冗余逻辑，同时HTML结构有误（所有单元格被塞进单个<tr>中）。需要修改代码，为每行添加从1开始的连续序号。

修改后的代码 #

1. 修正表格内容生成函数 #

const tableD = info?.idea?.prod.map((item, index) => {
    // 直接解构当前项的group数据，去除冗余逻辑
    const { subj, class: className, section } = item.group;
    // 利用index+1生成连续序号，返回完整的表格行
    return `
<tr>
    <td>${index + 1}</td>
    <td>${subj}</td>
    <td>${className}</td>
    <td>${section}</td>
</tr>
    `.trim();
}).join('');

console.log(tableD);

2. 修正HTML结构 #

原HTML将所有内容塞进单个<tr>会导致布局混乱，改为直接插入生成的每行<tr>：

<table class="demo">
    <thead>
    <tr>
     <th>No</th>
     <th>Subj</th>
     <th>Class</th>
     <th>Section</th>
    </tr>
    </thead>
    <tbody>
        ${tableD}
    </tbody>
</table>

关键修改说明 #

• 序号生成：借助map方法的第二个参数index，通过index + 1得到从1开始的连续序号。
• 简化逻辑：原代码中多余的数组定义和三重循环完全没必要，每个prod项仅对应一组数据，直接解构取值即可。
• 修复布局：调整HTML结构，将生成的每行<tr>直接放入<tbody>，符合表格的标准结构。

内容的提问来源于stack exchange，提问作者Nazimuddin Mia