Skip to content
Advertisement

Can you store js code on the fly in a variable and have js read it?

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: []
        });
      });
    }  
  }
});
7 People found this is helpful
Advertisement