如何用jQuery转换AJAX响应生成calendarGC组件的events

问题说明 #

需要将通过AJAX从bookings.php获取的JSON预约数据，转换为calendarGC日历组件所需的events配置格式，原转换代码未成功，需修正实现。

获取的原始JSON数据 #

[
   {
      "name":"Elly",
      "phone":"4345353534",
      "date":"2023-06-20",
      "time":"10:30:00",
      "comment":"Some comment here",
      "timestamp":"2023-06-06 09:16:28",
      "badge": "badge bg-success",
      "color": "green"
   },
   {
      "name":"Peter",
      "phone":"3943476534875",
      "date":"2023-06-20",
      "time":"18:00:00",
      "comment":"No comment",
      "timestamp":"2023-06-06 06:16:28",
      "badge": "badge bg-danger",
      "color": "red"
   }
]

原AJAX调用代码 #

$(document).on('click', '#bookings', function() {
    var account = $('#account').val();
    $.ajax({
        url:"bookings.php",
        method:"POST",
        data:{account:account},
        success:function(data) {
            // 需在此处添加转换逻辑
        }
    });
});

用户尝试的错误代码及问题分析 #

var json = $.parseJSON(data);
var array = [];
json.forEach((item) => {
    item = {}
    item ["date"] = new Date('"'+item.date+'"');
    item ["eventName"] = item.name;
    item ["className"] = item.badge;
    item ["dateColor"] = item.color;
    jsonObj.push(item);
});

错误点： #

• 遍历过程中执行item = {}，直接清空当前遍历的原始数据项，导致后续无法读取item.name、item.date等字段
• 定义的数组变量为array，但push时使用未定义的jsonObj，变量名不匹配
• Date构造函数中添加了多余引号，会导致日期解析失败
• 未添加calendarGC要求的onclick回调函数

正确实现方案 #

步骤1：优化AJAX请求 #

添加dataType: 'json'，让jQuery自动解析返回的JSON数据，无需手动调用$.parseJSON

步骤2：数据转换逻辑 #

使用map方法遍历原始数据，逐个转换为calendarGC所需的事件对象，映射对应字段并添加统一的onclick回调

步骤3：初始化/更新日历组件 #

将转换后的事件数组传入calendarGC的events配置项，完成组件初始化或更新

完整整合代码 #

$(document).on('click', '#bookings', function() {
    var account = $('#account').val();
    $.ajax({
        url:"bookings.php",
        method:"POST",
        data:{account:account},
        dataType: 'json', // 自动解析JSON
        success:function(rawData) {
            // 转换数据为calendarGC所需格式
            const calendarEvents = rawData.map(item => ({
                date: new Date(item.date),
                eventName: item.name,
                className: item.badge,
                dateColor: item.color,
                onclick: function(e, eventData) {
                    // 点击事件可按需扩展，比如打印完整预约信息
                    console.log('预约详情:', item);
                }
            }));

            // 初始化或更新日历组件
            $("#calendar").calendarGC({
                dayBegin: 0,
                prevIcon: '<',
                nextIcon: '>',
                onPrevMonth: function(e) {
                    console.log("prev", e);
                },
                onNextMonth: function(e) {
                    console.log("next", e);
                },
                events: calendarEvents,
                onclickDate: function(e, data) {
                    console.log(e, data);
                }
            });
        }
    });
});

补充说明 #

• 如果日历组件已提前初始化，可查看calendarGC文档是否提供更新事件的API（如updateEvents），避免重复初始化
• 若需在onclick回调中获取完整的预约信息（如电话、备注），可直接在回调中引用原始item对象，无需额外处理

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