невозможно добавить массив, сформированный самоопределяемой функцией, в качестве источника события - PullRequest
Новая
       25

невозможно добавить массив, сформированный самоопределяемой функцией, в качестве источника события

2 голосов
/ 20 марта 2020

Я использовал AJAX для запроса данных из базы данных через API. Вот функция. Так как форматирование в дБ отличается от того, которое требуется для полного календаря, я создал объект с именем schedule, который выглядит так же, как объект события, для хранения каждого элемента события. Затем pu sh каждый объект в массив, называемый расписаниями. (В случае, если кто-то спросит, reformattingTime () просто меняет строку, которую я получаю из базы данных, с формата ЧЧММ на ЧЧ: ММ: СС) 

    function getCourse(arr){
        $.ajax({
            type: "GET",
            url: '/course',
            success: function(req){
                for (var i = 0; i < req.length;i++){
                    var schedule = {daysOfWeek:[]};
                    schedule.title = req[i].course_name;
                    schedule.daysOfWeek = req[i].course_day;
                    schedule.startTime = reformattingTime(req[i].course_starttime);
                    schedule.endTime = reformattingTime(req[i].course_endtime);
                    arr.push(schedule);
                }

            },
            error: function(err){
                alert('Error:' + err);
            }
        }
        )
    }

вот как выглядит расписание [0]

Затем, когда я загружаю страницу, я добавляю расписания в качестве источника событий, а затем отображаю календарь. Однако события не будут отображаться в календаре. 

    <script>
        var schedules = [];

        $(document).ready(function(){
            getCourse(schedules);
            var calendarEl = document.getElementById('calendar');
            var calendar = new FullCalendar.Calendar(calendarEl, {
                plugins: ['timeGrid', 'dayGrid', 'interaction', 'list'],
                header:{
                    left: 'timeGridWeek,listMonth'
                },
                defaultView: 'timeGridWeek',
            });
            calendar.addEventSource(schedules);
            calendar.render();
        });

Если я жестко закодирую массив, события могут отображаться. Я проверил, что объект расписания из getCourse () совпадает с объектом, который я жестко запрограммировал.

индекс 0 жестко запрограммирован, а индекс 1 генерируется из функции. В этой ситуации отображается только 0 

<script>
        var schedules = [{
          title: "A1",
          startTime: "18:00:00",
          endTime: "20:00:00",
          daysOfWeek:['1']
        }];

        $(document).ready(function(){
            getCourse(schedules);
            var calendarEl = document.getElementById('calendar');
            var calendar = new FullCalendar.Calendar(calendarEl, {
                plugins: ['timeGrid', 'dayGrid', 'interaction', 'list'],
                header:{
                    left: 'timeGridWeek,listMonth'
                },
                defaultView: 'timeGridWeek',
            });
            calendar.addEventSource(schedules);
            calendar.render();
        });

1 Ответ

1 голос
/ 21 марта 2020

Ваша проблема в том, что AJAX запрос имеет значение ASYN C. Это означает, что остальная часть кода продолжает выполняться до завершения запроса. Это означает, что ваше расписание всегда будет пустым, когда создается календарь. Поэтому вам нужно подождать, пока запрос не будет выполнен. Итак, вы должны сделать что-то вроде ниже. Я также добавил некоторые дополнительные улучшения кода, которые вы могли бы использовать, используя возможности ES6 +.

Я не знаю API call и c, поэтому не могу все это протестировать, но это то, что вам нужно делать. 

function getCourse(arr) {
  return $.ajax({ // return the promise
    type: "GET",
    url: '/course'
  })
}

function renderCalendar(courseList) {
  const calendarEl = document.getElementById('calendar');
  const calendar = new FullCalendar.Calendar(calendarEl, {
    plugins: ['timeGrid', 'dayGrid', 'interaction', 'list'],
    header: {
      left: 'timeGridWeek,listMonth'
    },
    defaultView: 'timeGridWeek',
  });
  calendar.addEventSource(schedules);
  calendar.render();
}


function toCourseModel(course) {
  return {
    daysOfWeek: [],
    title: req[i].course_name,
    daysOfWeek: req[i].course_day,
    startTime: reformattingTime(req[i].course_starttime),
    endTime: reformattingTime(req[i].course_endtime),
  }
}

// DOMContentLoaded
// @see https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded
document.addEventListener('DOMContentLoaded', async (event) => { // ES6+ Native javascript.
  console.log('DOM fully loaded and parsed');

  const coursesList = await getCourse().catch(console.error) // await till async promise is complete
  const transFormed = coursesList.map((course) => { // ES6 Array.map() method
    return toCourseModel(course);
  });

  // Now create the calendar
  renderCalendar(transFormed);

});
...