有没有办法可以清空我的对象以使 new Dates() 能够插入到我的日历中？

Question

我正在尝试这样做，以便当我的程序从假期 API 接收到新的 JSON 数据时，它可以用新数据替换来自 API 的旧数据。

我尝试在开始时将数组声明为空，但这不起作用。如果数组 > 1，我也尝试清空数组，但这也不起作用。

我的代码：

// Declares an empty array
        var eventsArr = [];
        
        console.log(eventsArr);
        
        // Pushes the API data to an object
        for(i = 0; i < result['data']['holidays'].length; i++){
          let date = result['data']['holidays'][i]['date']['iso'];
          eventsArr.push({
              "startDate": new Date(date),
              "endDate"  : new Date(date),
              "summary"  : result['data']['holidays'][i]['description']
          });
        }
        
        // Uses the pushed data to add the dates to the calendar
        $("#calendar").simpleCalendar({       
          // Events displayed
          displayEvent:true,
          // Dates of the events                  
          events: eventsArr
        });        

Answer 1

我写了一个sn-p，你可以试试：它在随机事件时初始化日历，每次点击“重新加载”都会刷新3个随机元素。您可以跳过“模拟您的 API”部分，因为这只是为了让我的 sn-p 每次都使用新数据。

基本上，您需要做的是获取事件并将它们包含在日历中的功能。然后可以在每次需要时调用此函数，而不是在页面打开时仅获取一次事件。

获取事件后，此函数清空日历并将新数据放入日历中。

最后，我很久以前就来自 jQuery 世界，我强烈建议迁移到 VueJS，因为您将更轻松地构建更复杂的应用程序。

/*
  Mocking of your API
*/
  // to wait a bit
  const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));

  // to create random dates
  function randomDate(start, end) {
    return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime()));
  }

  // to build an event
  function mockEvent() {
    const date = randomDate(new Date(2021, 9, 1), new Date(2021, 9, 31));
    return {
      startDate: date,
      endDate: date,
      summary: `EVENT ${Math.floor(100*Math.random())}`,
    }
  }

  // to call the API
  async function mockAPI() {
    console.log('API call');
    await sleep(3000);
    return Array.from({length: 3}, (x) => mockEvent());
  }

/*
  Function to execute when you want to
  initialize your calendar
*/
const initializeCalendar = async () => {
  console.log('Calendar initialization');
  /*
    Here you call your API
  */
  const events = await mockAPI();
  console.log('Calendar filling');
  let container = $("#calendar");
  container.empty().data('plugin_simpleCalendar', null).simpleCalendar({
    displayEvent: true,
    events: events
  });
}

// when you want to fetch elements
async function reload() {
  console.log('Reloading');
  await initializeCalendar();
}

/*
  to properly initialize the calendar
*/
$(document).ready(function() {
  console.log('FIRST INIT');
  initializeCalendar();
});
      

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://www.jqueryscript.net/demo/animated-event-calendar/dist/simple-calendar.css" rel="stylesheet"/>
<script src="https://www.jqueryscript.net/demo/animated-event-calendar/dist/jquery.simple-calendar.js"></script>

<button onclick="reload()">
  Reload
</button>
<div id="calendar"></div>