无法访问已在 javascript 上声明的 object

Question

I'm trying to get some value over my server using jquery's $.get method and store the result in an object.

What I'm doing is running my function inside a loop:

function renderTabelScheduledEmploye(employees) {
  $('#containerDataStaff').empty();
  let record = '';
  let count = 1;

  if (employees.length > 0) {
    $.each(employees, function(key, value) {

      getFromServerScheduleCount(employees[key].schedule_employee_id);

      console.log(scheduleCountData);

      record += '<tr>';
      record += '<td>' + count + '</td>';
      record += '<td>( ' + employees[key].emp_kode + ') - ' + employees[key].emp_full_name + '</td>';
      record += '<td>' + scheduleCountData[0].work + '</td>';
      record += '<td>' + scheduleCountData[0].offDay + '</td>';
      record += '<td>' + scheduleCountData[0].leave + '</td>';
      record += '<td>' + scheduleCountData[0].shiftCount + '</td>';
      record += '<td><a href="#" data-id="' + employees[key].schedule_employee_id + '" class="btnSettingShift">Set Shift</a></td>';
      record += '</tr>';

      count++;
    });
  }

  $('#containerDataStaff').append(record);
}

Then I create a function to retrieve JSON data from my server using the $.get function, then store the data result to an object that has been declared:

var scheduleCountData = new Object();

function getFromServerScheduleCount(schedule_employee_id) {
  let url = `{{ url('/departement/schedule/manage/schedule/count') }}`;
  url = url + '/' + schedule_employee_id + '/get';
  let data = {};

  $.get(url, function(data) {
    let obj = JSON.parse(data);

    data.work = obj.work;
    data.dayOff = obj.dayOff;
    data.leave = obj.leave;
    data.shifts = obj.shifts;

    scheduleCountData.new = data;
  })
}

I can see in the console that the object has filled with the data

[object success to fill][1]

But when i try to access in code like this

scheduleCountData[0]

and log the result to to the console, it shows undefined .

This little bit frustrating for me. I hope someone can help me. Thanks for community.

EDIT: Sorry i miss i try to call that object with code like this

scheduleCountData.new

but still undefined on console

Answer 1

Seems youre not waiting for the load to finish before trying to use the data:

// This has a get call, which is async (takes time to load)
getFromServerScheduleCount(employees[key].schedule_employee_id);

// The script will continue, without waiting for the load to finish, so can be empty
console.log(scheduleCountData);

I would suggest adding a callback, like this:

getFromServerScheduleCount(employees[key].schedule_employee_id, function(scheduleCountData) {
    console.log(scheduleCountData);
});

function getFromServerScheduleCount(schedule_employee_id, callback) {
     $.get(url, function(data) {
         // ...
         callback(data);
     });
}