在表列中动态显示对象数组-Javascript

问题描述

我正在尝试创建一个约会空档选择网格。我把所有约会都归类为日期。我想将下面的对象数组显示为可单击的网格。我有我需要的一切，但在列中显示它有困难。我当前的输出：

如您所见，它在正确的日期标题旁边显示了正确的约会，但是它在同一行中添加了下一个约会，依此类推。我希望每个日期及其对应的约会都显示在单独的列中。日期标题在顶部，约会在下面列出。我只是在使用main.js文件和index.html文件。

下面的分组约会空位数组看起来像这样：

2020-09-25: [{0:{AppointmentDateTime: "2020-09-25T13:00:00Z"}}]
2020-09-28: [{0:{AppointmentDateTime: "2020-09-28T08:00:00Z"}},{1:{AppointmentDateTime: "2020-09-28T10:30:00Z"}},{2:{AppointmentDateTime: "2020-09-28T11:00:00Z"}}]
2020-09-29: [{0:{AppointmentDateTime: "2020-09-29T08:00:00Z"}},{1:{AppointmentDateTime: "2020-09-29T09:00:00Z"}},{2:{AppointmentDateTime: "2020-09-29T11:00:00Z"}}]

这是我到目前为止所拥有的：

let result = await response.json();
let groupedAppointments = {}

result.forEach((item) => {
    const date = item.AppointmentDateTime.split('T')[0]
    if (groupedAppointments[date]) {
        groupedAppointments[date].push(item);
    } else {
        groupedAppointments[date] = [item];
    }
})


var grid = clickableGrid(groupedAppointments,groupedAppointments,function(el,item) {
    console.log("You clicked on element:",el);
    selectedAppointment = item.AppointmentDateTime;
    console.log(selectedAppointment);
    el.className = 'clicked';
    if (lastClicked) lastClicked.className = '';
    lastClicked = el;
});

document.getElementById("clickable-grid").appendChild(grid);

function clickableGrid(groupedAppointments,index,callback) {
    var i = 0;
    var grid = document.createElement('table');

    grid.className = 'grid';

    Object.keys(groupedAppointments).forEach((item) => {

        var days = groupedAppointments[item];
        var tableRowHeader = grid.appendChild(document.createElement('tr'));
        var th = tableRowHeader.appendChild(document.createElement('th'));
        th.innerHTML = item;

        days.forEach((item) => {

            var tr = grid.appendChild(document.createElement('tr'));
            //var rowHeader = tr.appendChild(document.createElement('th'))
            var cell = tr.appendChild(document.createElement('td'));
            //rowHeader.innerHTML = item.SlotName;
            cell.innerHTML = item.AppointmentDateTime;
            cell.addEventListener('click',(function(el,item) {
                return function() {
                    callback(el,item);
                }
            })(cell,item),false);
        })

    })

    return grid;
}

我希望这是足够的细节。任何问题都可以问。感谢所有帮助。

更新后的输出：

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

grid-layout html javascript