遍历 JSON 对象以显示公共假期表

Question

我正在尝试显示一个包含公共假期列表的表格。目前我有一个表格行，左侧是假期名称，右侧是日期。

显示的数据来自 JSON 对象的最终数组，仅在我想显示所有公共假期的地方。

表格的html：

                    <table class="table table-striped" > 
                        <tbody class="summT">
                            <div class="resptext">
                                <tr>
                                    <td align="left" id="txtHolidayName">
                                    </td>
                                    <td class="fontGrey" id="txtHolidayDate">
                                    </td>
                                </tr>
                            </div>
                        </div>
                    </tbody>
                </table>
                

我在对 api 的 AJAX 调用的成功块中有以下代码：

   ............. 

   result.data.response.holidays.forEach(datepoint => {
                              
                            $dateIterate = new Date(datepoint.date.iso);
                            $('#txtHolidayDate').html($dateIterate.toDateString());
                            $('#txtHolidayName').html(datepoint.name);
                            
                          }) 

非常感谢任何想法。非常感谢。

Answer 1

我认为您需要做的是在循环中包含模板 HTML，每次迭代都会填充模板 HTML，然后将填写好的模板的每个副本注入到 HTML 表格中：

HTML：

<table class="table table-striped" > 
    <tbody class="summT">
        <div id="holidates" class="resptext">
        </div>
    </tbody>
</table>

JavaScript 循环：

result.data.response.holidays.forEach(datepoint => {
    $('#holidates').append('<tr>\n' +
    '<td align="left" >' + datepoint.name + '</td>' +
    '<td class="fontGrey" >' + new Date(datepoint.date.iso).toDateString() + '</td>\n' + 
    '</tr>');
});