使用jQuery $.get获取数据后无法访问已声明的JavaScript对象求助

首先，咱们来拆解下你遇到的两个核心问题：

问题1：异步请求的时序错误 #

你的$.get是异步AJAX请求，这意味着调用getFromServerScheduleCount后，代码会立刻继续执行console.log(scheduleCountData)和HTML拼接逻辑，完全不会等待服务器返回数据。所以这时候scheduleCountData还没被赋值，自然会显示undefined。

问题2：数据存储与访问的不匹配 #

你在请求回调里把数据存在了scheduleCountData.new，但在HTML拼接时却用scheduleCountData[0]访问——scheduleCountData是一个对象，不是数组，根本没有索引为0的属性，这也会导致undefined。

修复方案：用Async/Await处理异步时序 #

我们可以把请求函数改成返回Promise，然后在渲染函数里用async/await等待每个请求完成后再处理数据，同时统一数据的存储和访问方式：

1. 修改请求函数，返回Promise #

// 不需要再用全局对象存数据，直接通过Promise返回结果更清晰
function getFromServerScheduleCount(schedule_employee_id) { 
    return new Promise((resolve, reject) => {
        let url = `{{ url('/departement/schedule/manage/schedule/count') }}`; 
        url = url + '/' + schedule_employee_id + '/get'; 
        
        $.get(url, function(data) { 
            let obj = JSON.parse(data); 
            // 统一字段名，和HTML里的调用保持一致
            const scheduleData = {
                work: obj.work,
                offDay: obj.dayOff, // 原代码里HTML用offDay，函数里写的dayOff，这里统一
                leave: obj.leave,
                shiftCount: obj.shifts // HTML里用shiftCount，对应obj.shifts
            };
            resolve(scheduleData); // 将结果返回给调用者
        }).fail(function(error) {
            // 处理请求失败的情况
            console.error('获取数据失败:', error);
            reject(error);
        });
    });
}

2. 修改渲染函数，用Async/Await等待请求完成 #

// 把函数标记为async，这样就能用await
async function renderTabelScheduledEmploye(employees) { 
    $('#containerDataStaff').empty(); 
    let record = ''; 
    let count = 1; 
    
    if (employees.length > 0) { 
        // 用for...of循环（$.each不支持await），逐个等待请求完成
        for (const employee of employees) { 
            try {
                // 等待请求返回数据
                const scheduleData = await getFromServerScheduleCount(employee.schedule_employee_id); 
                console.log(scheduleData); // 现在这里能拿到正确的数据了
                
                // 拼接HTML，直接用返回的scheduleData
                record += '<tr>'; 
                record += `<td>${count}</td>`; 
                record += `<td>( ${employee.emp_kode}) - ${employee.emp_full_name}</td>`; 
                record += `<td>${scheduleData.work}</td>`; 
                record += `<td>${scheduleData.offDay}</td>`; 
                record += `<td>${scheduleData.leave}</td>`; 
                record += `<td>${scheduleData.shiftCount}</td>`; 
                record += `<td><a href="#" data-id="${employee.schedule_employee_id}" class="btnSettingShift">Set Shift</a></td>`; 
                record += '</tr>'; 
                count++; 
            } catch (error) {
                // 如果某个请求失败，可以在这里处理，比如拼接错误提示行
                record += `<tr><td colspan="7">获取员工${employee.emp_full_name}数据失败</td></tr>`;
            }
        } 
    } 
    $('#containerDataStaff').append(record); 
}

额外优化建议 #

如果你的服务器接口支持批量查询，建议把所有schedule_employee_id收集起来，发一次请求获取所有数据，这样能减少HTTP请求次数，提升性能。比如：

async function renderTabelScheduledEmploye(employees) { 
    $('#containerDataStaff').empty(); 
    let record = ''; 
    let count = 1; 
    
    if (employees.length > 0) { 
        // 收集所有员工的schedule_employee_id
        const ids = employees.map(emp => emp.schedule_employee_id);
        // 发送批量请求（需要后端接口支持）
        const bulkData = await $.get(`{{ url('/departement/schedule/manage/schedule/count/bulk') }}`, { ids });
        
        // 循环处理每个员工的数据
        for (const employee of employees) { 
            const scheduleData = bulkData.find(item => item.schedule_employee_id === employee.schedule_employee_id);
            // 后续拼接HTML逻辑和之前一致
        }
    } 
    $('#containerDataStaff').append(record); 
}

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