是否有一种方法，我可以清空我的对象，使新的日期()能够插入到我的日历?

Question

我正试图使它，当我的程序从假日API接收到新的JSON数据时，它可以用新数据替换API中的旧数据。

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

我代码:

// 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

我写了一个片段你可以试试:它初始化日历时随机事件，每次你点击"重新加载"刷新3个随机元素。您可以跳过"嘲弄您的api"。部分原因是为了使我的代码片段每次都能处理新数据。

基本上，你要做的是有一个函数来获取事件并将它们包含在日历中。这个函数可以在每次需要的时候调用，而不是只在打开页面的时候获取一次事件。

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

最后，我强烈建议您迁移到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>