Estoy tratando de hacer que cuando mi programa reciba nuevos datos JSON de una API de vacaciones, pueda reemplazar los datos antiguos de la API con los nuevos datos.
Intenté declarar la matriz como vacía al principio, pero esto no funcionó. También intenté vaciar la matriz si era> 1, pero esto tampoco funcionó.
Mi código:
// 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 });Escribí un fragmento que puedes probar: inicializa el calendario cuando hay eventos aleatorios, y cada vez que haces clic en "recargar", actualizas los 3 elementos aleatorios. Puede omitir la parte "Burlarse de su API", ya que es solo para hacer que mi fragmento funcione con datos nuevos cada vez.
Básicamente, lo que tienes que hacer es tener una función para buscar los eventos e incluirlos en el calendario. Esta función se puede llamar cada vez que la necesite, en lugar de buscar los eventos solo una vez cuando se abre la página.
Después de haber obtenido los eventos, esta función vacía el calendario y coloca los nuevos datos dentro del calendario.
Y por último, viniendo del mundo jQuery hace mucho tiempo, sugiero enfáticamente migrar a VueJS, ya que creará aplicaciones más complejas con mayor facilidad.
/* 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>