I’m not sure if what I’m trying to do is the correct/valid approach to what I’m trying to accomplish; essentially, I’m retrieving data from a db via an ajax call, I want this data to populate a js library where the layout is something like
data[ item{ name: 'name', start_date: date, end_date: date }, item{ name: 'name', start_date: date, end_date: date }, ]
is there any way I can populate the code inside ‘data’ on the fly? I was thinking with a loop to populate a variable which would hold the data and placing it like so
//this is hard coded, but the idea is that a loop would populate this with the necessary information let items = " item{ name: 'name', start_date: date, end_date: date }, item{ name: 'name', start_date: date, end_date: date }"; data[ items ]
Would this be a valid approach? thanks in advance!
UPDATE: For clarification, this what I have
$('#calendar').fullCalendar({ defaultDate: today, eventLimit: true, events: [ { title: 'Some event', start: '2022-08-31', end: '2022-08-31' }, { title: 'Some event', start: '2022-08-31', end: '2022-08-31' } ] });
What im trying to achieve is something like this
let allEvents = " { title: 'Some event', start: '2022-08-31', end: '2022-08-31' }, { title: 'Some event', start: '2022-08-31', end: '2022-08-31' }"; $('#calendar').fullCalendar({ defaultDate: today, eventLimit: true, events: [ allEvents; ] });
Would this be possible?
Advertisement
Answer
So, closing this question, thanks to @DaveNewton for the insight, it really clarified what I was supposed to do; I apologize for the confusion, my thought process essentially revolved around ‘echoing’ or ‘printing’ code in php.
my approach was:
$.ajax({ type: "GET", url: filethathandlesrequest.php, data: { data_to_be_sent: 'data', }, success: function(response) { response = JSON.parse(response); eventsGotten = response.return_result; //this is where I create the object let eventsToDisplay = []; for (let index = 0; index < eventsGotten.length; index++) { const element = eventsGotten[index]; let singleEvent = {title: element.description, start: element.start_date, end: element.end_date}; eventsToDisplay.push(singleEvent); } if (response.return_code === 0) { if ($('#calendar').exists()) { loadScript(plugin_path + 'fullcalendar/fullcalendar.min.js', function() { $('#calendar').fullCalendar({ defaultDate: today, //editable: true, eventLimit: true, events: eventsToDisplay // <-- this is where I use it; and it works! }); }); } } else { //you can ignore this, this is just to not display anything if my ajax request fails if ($('#calendar').exists()) { loadScript(plugin_path + 'fullcalendar/fullcalendar.min.js', function () { $('#calendar').fullCalendar({ defaultDate: today, //editable: true, eventLimit: true, events: [] }); }); } } });