将返回的 api 数据追加到表中

Question

我正在尝试从公共假期 API 返回一些信息，并将其显示在传单地图上、表格内、弹出窗口中。

弹出窗口正在运行，数据在控制台中正确显示，但在弹出窗口本身中却没有。我的代码没有达到预期的效果，即在表格中添加每个公共假期的日期和名称的新行（此信息会根据地图显示的国家/地区而有所不同）。

有什么建议/我缺少什么吗？

与此相关的部分：

success: function(result) {
    
                console.log(result);
            
                if (result.status.name == "ok") {
                    
                    var countryHolidays = [];
        
                    $.each(result.data, function(index, value){
                        
                        if (value.location){
                            var newLocation = value.location.join();
                            countryHolidays.push({ name: value.country, date: value.date, location: newLocation});
                        } else {
                            countryHolidays.push({ name: value.country, date: value.date, location: "Nationwide"});
                        }
                        
                    });
                    
                        var info =
                        `
                        <div id="holidays-div" class="bg-success mx-0 my-0 px-1 py-1">
                        <table id="holidays-table" class="table table-striped table-responsive border-0 rounded-12px mx-0 my-0 px-0 py-0">
                        <thead class="bg-success text-white">
                            <th colspan="2">Public Holidays</th>
                        </thead>
                        <tbody>
                            <tr><td>Name</td><td>Date</td></tr>
                            
                        </tbody>
                        </table>
                        </div>
                        `
                        
                        countryHolidays.forEach((element) => {
                            
                            $('#holidays-table tr:last').append("<tr><td>" + element.name + "</td><td>" + element.date + "</td></tr>");
                    
                        });

                        holidayMarker.addLayer(L.marker([$('#lat').text(), $('#lng').text()], {icon: holidayicon}).bindPopup(info));
                                    };
                                        
                        mymap.addLayer(holidayMarker);  
                        

            }, ...

Answer 1

嗯，你指的是一个甚至还没有生成的元素。试着先做桌子。

$('#holidays-table tr:last').append("" + element.name + "" + element.date + "");

在上面的部分中，您希望在假期表中添加一些内容，但与此同时该表甚至不存在（您将元素存储在名为 info 的变量中）。因此，首先，在 DOM 中添加这个（比如将它附加到主体），然后使用它进行操作。这是一个例子

$("body").append(info)
$('#holidays-table tr:last').append(...

在此之后，您可以附加任何您想要的内容（例如循环中的内容）。希望能帮上忙！